open-index/open-npm huggingface dataset:
npm package: @s2nc/milkdown-plugin-placeholder
Description: Placeholder plugin for milkdown.
Author: jiannei
Latest version: 0.3.0

<h1 align="center"> Milkdown placeholder plugin. </h1>

> Placeholder plugin for milkdown.

![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue?style=flat&labelColor=black)
![NPM Version](https://img.shields.io/npm/v/%40s2nc%2Fmilkdown-plugin-placeholder?style=flat)
![NPM License](https://img.shields.io/npm/l/%40s2nc%2Fmilkdown-plugin-placeholder?style=flat)

## 安装

```bash
npm i @s2nc/milkdown-plugin-placeholder
```

## 使用

```js
import { placeholderCtx, placeholder as placeholderPlugin } from '@s2nc/milkdown-plugin-placeholder'
import { Milkdown, useEditor } from '@milkdown/vue'
import {rootCtx} from '@milkdown/core'

const { loading, get } = useEditor((root) => {
  return Editor.make()
    .config((ctx) => {
      // ...
      
      // 编辑器初始化配置
      ctx.set(rootCtx, root)

      // 覆盖默认的 placeholder
      ctx.set(placeholderCtx, 'placeholder')

    })
    .use([
      placeholderPlugin,// 使用插件
    ])
})
```

## 协议

MIT 许可证（MIT）。有关更多信息，请参见[协议文件](LICENSE)。
npm package: @s2nc/milkdown-plugin-shiki
Description: shiki plugin for milkdown.
Author: jiannei
Latest version: 0.5.1

<h1 align="center"> Milkdown shiki plugin. </h1>

> Shiki plugin for milkdown.

![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue?style=flat&labelColor=black)
![NPM Version](https://img.shields.io/npm/v/%40s2nc%2Fmilkdown-plugin-shiki?style=flat)
![NPM License](https://img.shields.io/npm/l/%40s2nc%2Fmilkdown-plugin-shiki?style=flat)

## 安装

```bash
npm i @s2nc/milkdown-plugin-shiki
```

## 使用

```js
import { shiki, shikiConfig } from '@s2nc/milkdown-plugin-shiki'
import { Milkdown, useEditor } from '@milkdown/vue'
import {rootCtx} from '@milkdown/core'

const { loading, get } = useEditor((root) => {
  return Editor.make()
    .config((ctx) => {
      // ...
      
      // 编辑器初始化配置
      ctx.set(rootCtx, root)

      // 代码高亮设置
      ctx.set(shikiConfig.key, {
        themes: { light: 'dracula', dark: 'dracula-soft' },
        langs: ['bash', 'c', 'css', 'go', 'html', 'java', 'javascript', 'js', 'json', 'markdown', 'php', 'python', 'sql', 'sh', 'rust', 'vue'],
        dark: false,
      })

    })
    .use(shiki)// 使用插件
})
```

## 示例

- [coditor](../../src/components/Coditor.vue)

## 协议

MIT 许可证（MIT）。有关更多信息，请参见[协议文件](LICENSE)。
npm package: @s2terminal/every-url
Description: Enable to bookmark dynamic url.
Author: s2terminal
Latest version: 0.0.4

<a href="https://badge.fury.io/js/%40s2terminal%2Fevery-url"><img src="https://badge.fury.io/js/%40s2terminal%2Fevery-url.svg" alt="npm version" height="18"></a>

# Every URL
This is React component that enables to bookmark dynamic url.

## Installation
```bash
$ npm install --save-dev @s2terminal/every-url
```

### Requirements
- [React](https://github.com/facebook/react/)
- [MATERIAL\-UI](https://github.com/mui-org/material-ui)

## Usage
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import EveryURL from "@s2terminal/every-url";

ReactDOM.render(
  <EveryURL
    uniqueStorageKey="EveryURLState"
    urlSettings={
      {
        host: {
          name: "HOST",
          type: "static",
          default: "https://example.com/before/date/path/"
        },
        datePath: {
          name: "DATE",
          type: "date",
          default: "YYYY/MM/DD/"
        },
        afterDatePath: {
          name: "AFTER DATE PATH",
          type: "static",
          default: "after?date=path"
        }
      }
    }
  />, document.getElementById('main'));

```


## Build

```bash
$ npm run prepare
```

## Developing

```bash
$ npm run develop
```
open http://localhost:8080/

## License
[MIT](LICENSE).
npm package: @s3-good/browser
Description: S3 file browser UI for listing, previewing, navigating, and managing objects.
Latest version: 0.2.0

# @s3-good/browser

S3 file browser UI for listing, previewing, navigating, and managing objects.

## Installation

```bash
pnpm add @s3-good/browser
```

Import styles once:

```ts
import "@s3-good/browser/styles.css";
```

## Server route setup

`@s3-good/browser` expects a browser API endpoint (usually `/api/browser`).

### Next.js route

```ts
// app/api/browser/route.ts
import { createBrowser, createBrowserRouteHandler } from "s3-good/next";

const browser = createBrowser()
  .buckets(["assets", "backups"])
  .defaultBucket("assets")
  .pageSize(100)
  .done();

export const { GET, POST } = createBrowserRouteHandler({
  browser,
  config: {
    region: process.env.AWS_REGION!,
    bucket: process.env.AWS_BUCKET!,
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
  },
});
```

## Basic UI usage

```tsx
import { S3Browser } from "@s3-good/browser";

export default function FilesPage() {
  return (
    <S3Browser
      url="/api/browser"
      config={{
        buckets: ["assets", "backups"],
        defaultBucket: "assets",
      }}
    />
  );
}
```

## Upload integration

You can wire uploads directly into the browser toolbar.

```tsx
<S3Browser
  url="/api/browser"
  upload={{
    endpoint: "mediaUploader",
    url: "/api/upload",
    multiple: true,
    label: "Upload",
  }}
/>;
```

Or provide your own uploader with `upload.onUploadFiles`.

## Performance options

### Virtualization

```tsx
<S3Browser
  virtualization={{
    grid: { enabled: true, threshold: 180, itemMinWidth: 140, rowHeight: 152, overscanRows: 2 },
    list: { enabled: true, threshold: 120, rowHeight: 46, overscan: 6 },
  }}
/>;
```

### Pagination

```tsx
<S3Browser
  pagination={{
    mode: "infinite", // or "manual"
    rootMargin: "240px 0px",
    threshold: 0,
  }}
/>;
```

## Theming and composition

### Appearance slots

```tsx
<S3Browser
  appearance={{
    container: "rounded-3xl",
    toolbar: "bg-muted/30",
    list: "shadow-none",
    loadMoreButton: "min-w-40",
  }}
/>;
```

### Headless composition with `S3BrowserRoot`

```tsx
import {
  S3BrowserRoot,
  BrowserToolbar,
  BrowserBreadcrumbs,
  BrowserSearchBar,
  BrowserFileView,
  BrowserSelectionBar,
  BrowserPreviewModal,
} from "@s3-good/browser";

<S3BrowserRoot url="/api/browser">
  <BrowserBreadcrumbs />
  <BrowserSearchBar />
  <BrowserToolbar />
  <BrowserFileView />
  <BrowserSelectionBar />
  <BrowserPreviewModal />
</S3BrowserRoot>;
```

## Main exports

- `S3Browser`
- `S3BrowserRoot`, `useS3BrowserContext`
- `useBrowser`, `createBrowserClient`, `createBrowserStore`
- utility exports: `getPreviewType`, `getCodeLanguage`

## License

MIT
npm package: @s3-good/shared
Description: Shared runtime/types package used by `@s3-good/core`, `@s3-good/react`, and `@s3-good/browser`.
Latest version: 0.1.0

# @s3-good/shared

Shared runtime/types package used by `@s3-good/core`, `@s3-good/react`, and `@s3-good/browser`.

Most users consume these exports transitively, but this package is useful directly for shared types, error handling, and MIME/file helpers.

## Installation

```bash
pnpm add @s3-good/shared
```

## What it provides

- Shared domain types (`S3Config`, `UploadFileResponse`, browser types)
- Structured error classes (`UploadError`, `S3Error`)
- File type/MIME helpers (`getMimeType`, `matchesFileType`, `getAcceptedMimeTypes`)
- Generic utils (`formatFileSize`, `parseFileSize`, `generateId`, hashing helpers)

## Core types

### `S3Config`

```ts
interface S3Config {
  region: string;
  bucket: string;
  accessKeyId: string;
  secretAccessKey: string;
  sessionToken?: string;
  endpoint?: string;
  forcePathStyle?: boolean;
  baseUrl?: string;
  signingSecret?: string;
}
```

### `UploadFileResponse<TServerData>`

```ts
interface UploadFileResponse<TServerData = unknown> {
  key: string;
  url: string;
  name: string;
  size: number;
  type: string;
  serverData: TServerData;
}
```

### Browser model types

Useful when building custom browser clients/UI:

- `BrowserItem`, `BrowserFile`, `BrowserFolder`
- `BrowserActionPayload`, `BrowserActionResponse`
- `BrowserConfig`, `SortConfig`, `ViewMode`

## Errors

### `UploadError`

```ts
import { UploadError } from "@s3-good/shared";

throw new UploadError({
  code: "MIDDLEWARE_ERROR",
  message: "Unauthorized",
  status: 401,
});
```

Common codes include:

- `ROUTE_NOT_FOUND`
- `INVALID_FILE_TYPE`
- `FILE_TOO_LARGE`
- `TOO_MANY_FILES`
- `INPUT_VALIDATION_FAILED`
- `MIDDLEWARE_ERROR`
- `S3_ERROR`
- `UPLOAD_FAILED`

### `S3Error`

```ts
import { S3Error } from "@s3-good/shared";

throw new S3Error("Failed to configure CORS", originalError);
```

## File type and MIME utilities

```ts
import {
  getAcceptedMimeTypes,
  matchesFileType,
  getFileExtension,
  getMimeType,
  getPreviewType,
  getCodeLanguage,
} from "@s3-good/shared";

getAcceptedMimeTypes(["image", "pdf"]);
// ["image/*", "application/pdf"]

matchesFileType("image/jpeg", ["image"]);
// true

getMimeType("photo.jpg");
// "image/jpeg"

getPreviewType("application/octet-stream", "photo.png");
// "image"

getCodeLanguage("app.ts");
// "typescript"
```

## Generic utilities

```ts
import { formatFileSize, parseFileSize, generateId } from "@s3-good/shared";

formatFileSize(2621440); // "2.5 MB"
parseFileSize("4MB");   // 4194304
generateId();            // short unique id
```

## License

MIT
npm package: @s3-publish/cli
Description: Keep files in sync with programmable hooks via CLI
Author: Adam Jarret
Latest version: 2.1.0

# @s3-publish/cli

[![Package Version](https://badgen.net/npm/v/@s3-publish/cli)](https://npmjs.com/package/@s3-publish/cli)
[![Git Repository](https://badgen.net/badge/source/GitHub/blue)](https://github.com/adamjarret/s3-publish/tree/master/packages/cli)

![Demo Screen Shot](https://adamjarret.github.io/s3-publish/assets/images/demo.gif)

| _Keep files in sync_ | **To Local** | **To S3** |
| -------------------: | :----------: | :-------: |
|       **From Local** |   &#10003;   | &#10003;  |
|          **From S3** |   &#10003;   | &#10003;  |

## Features

- [CLI](https://adamjarret.github.io/s3-publish/pages/cli/s3p.html) and a modular [API](https://adamjarret.github.io/s3-publish/globals.html)
- Supports custom [ignore](https://adamjarret.github.io/s3-publish/pages/guides/ignore.html) and [compare](https://adamjarret.github.io/s3-publish/pages/guides/compare.html) functions
- [Request parameters](https://adamjarret.github.io/s3-publish/pages/guides/requests.html) can be set programmatically
- Advanced users can [implement custom providers](https://adamjarret.github.io/s3-publish/pages/guides/advanced.html)

## Getting Started

See [Getting Started](https://adamjarret.github.io/s3-publish/pages/guides/getting-started.html)

## Documentation

- [API](https://adamjarret.github.io/s3-publish/globals.html)
- [CLI](https://adamjarret.github.io/s3-publish/pages/cli/s3p.html)

## Development

See [README](https://github.com/adamjarret/s3-publish#readme) in the repository root

## License

[MIT](https://github.com/adamjarret/s3-publish/tree/master/LICENSE.txt)

## Author

[Adam Jarret](https://atj.me)
npm package: @s3-publish/core
Description: Keep files in sync with programmable hooks
Author: Adam Jarret
Latest version: 1.0.1

# @s3-publish/core

[![Package Version](https://badgen.net/npm/v/@s3-publish/core)](https://npmjs.com/package/@s3-publish/core)
[![Git Repository](https://badgen.net/badge/source/GitHub/blue)](https://github.com/adamjarret/s3-publish/tree/master/packages/core)

This library implements the core functionality of the [s3-publish](https://adamjarret.github.io/s3-publish) project.

## Installation

    npm install --save @s3-publish/core

or

    yarn add @s3-publish/core

## Documentation

See [API Documentation](https://adamjarret.github.io/s3-publish/globals.html)

## Development

See [README](https://github.com/adamjarret/s3-publish#readme) in the repository root

## License

[MIT](https://github.com/adamjarret/s3-publish/tree/master/LICENSE.txt)

## Author

[Adam Jarret](https://atj.me)
npm package: @s3-publish/loggers
Description: Logger utilities for s3-publish
Author: Adam Jarret
Latest version: 1.0.1

# @s3-publish/loggers

[![Package Version](https://badgen.net/npm/v/@s3-publish/loggers)](https://npmjs.com/package/@s3-publish/loggers)
[![Git Repository](https://badgen.net/badge/source/GitHub/blue)](https://github.com/adamjarret/s3-publish/tree/master/packages/loggers)

This library implements the default loggers used by the [s3-publish](https://adamjarret.github.io/s3-publish) project.

## Installation

    npm install --save @s3-publish/loggers @s3-publish/core

or

    yarn add @s3-publish/loggers @s3-publish/core

## Documentation

See [API Documentation](https://adamjarret.github.io/s3-publish/globals.html)

## Development

See [README](https://github.com/adamjarret/s3-publish#readme) in the repository root

## License

[MIT](https://github.com/adamjarret/s3-publish/tree/master/LICENSE.txt)

## Author

[Adam Jarret](https://atj.me)
npm package: @s3-publish/provider-fs
Description: Local filesystem provider for s3-publish
Author: Adam Jarret
Latest version: 1.0.0

# @s3-publish/provider-fs

[![Package Version](https://badgen.net/npm/v/@s3-publish/provider-fs)](https://npmjs.com/package/@s3-publish/provider-fs)
[![Git Repository](https://badgen.net/badge/source/GitHub/blue)](https://github.com/adamjarret/s3-publish/tree/master/packages/provider-fs)

This library implements the default file system provider used by the [s3-publish](https://adamjarret.github.io/s3-publish) project.

## Installation

    npm install --save @s3-publish/provider-fs @s3-publish/core

or

    yarn add @s3-publish/provider-fs @s3-publish/core

## Documentation

See [API Documentation](https://adamjarret.github.io/s3-publish/globals.html)

## Development

See [README](https://github.com/adamjarret/s3-publish#readme) in the repository root

## License

[MIT](https://github.com/adamjarret/s3-publish/tree/master/LICENSE.txt)

## Author

[Adam Jarret](https://atj.me)
npm package: @s3-publish/provider-s3
Description: S3 provider for s3-publish
Author: Adam Jarret
Latest version: 1.0.1

# @s3-publish/provider-s3

[![Package Version](https://badgen.net/npm/v/@s3-publish/provider-s3)](https://npmjs.com/package/@s3-publish/provider-s3)
[![Git Repository](https://badgen.net/badge/source/GitHub/blue)](https://github.com/adamjarret/s3-publish/tree/master/packages/provider-s3)

This library implements the default AWS S3 provider used by the [s3-publish](https://adamjarret.github.io/s3-publish) project.

## Installation

    npm install --save @s3-publish/provider-s3 @s3-publish/core

or

    yarn add @s3-publish/provider-s3 @s3-publish/core

## Documentation

See [API Documentation](https://adamjarret.github.io/s3-publish/globals.html)

## Development

See [README](https://github.com/adamjarret/s3-publish#readme) in the repository root

## License

[MIT](https://github.com/adamjarret/s3-publish/tree/master/LICENSE.txt)

## Author

[Adam Jarret](https://atj.me)
npm package: @s32n/d1driver
Description: A simple cloudflare d1 driver
Author: simultsop
Latest version: 0.0.1

# d1driver

A lightweight TypeScript wrapper providing a simple interface to interact with SQLite D1 databases within workerd runtime intended for prototyping. Reducing SQL boilerplate to get, create, update, and remove functions. Not interfering with sqlite functionality.

# Installation
```npm install @s32n/d1driver```

# Usage
```node 

import { get, create, update, remove } from '@s32n/d1driver'

interface Env {
  DB: D1Database;
}

export const onRequestGet: PagesFunction<Env> = async (context) => {
  const { results: posts } = await get(
    context.env.DB,
    "blog"
  );

  if(posts.length===0)
    new Response("no blog post found", { status: 404 });

  return Response.json(posts);
}

export const onRequestPost: PagesFunction<Env> = async (context) => {
  const blogFormData = await context.request.formData();
  const newBlogPost = {
    title: formData.get('title'),
    content: formData.get('content'),
    image: formData.get('imageUrl'),
    createdAt: "CURRENT_TIMESTAMP"
  }

  const { success, results } = await create(
      context.env.DB,
      "blog", 
      newBlogPost
  );

  if( success !== true ) {
    return new Response("something went wrong", {
      status: 500,
    });
  }

  return Response.json( results.shift() )
}

export const onRequestPatch: PagesFunction<Env> = async (context) => {
  const blogFormData = await context.request.formData();

  const conditions = { id: blogFormData.get('id') }
  const blogPostUpdates = {
    title: formData.get('update-title'),
    content: formData.get('update-content'),
    image: formData.get('update-imageUrl'),
    updatedAt: "CURRENT_TIMESTAMP"
  }

  const { success, results } = await update(
      context.env.DB,
      "blog", 
      blogPostUpdates,
      conditions
  );

  if( success !== true ) {
    return new Response("something went wrong", {
      status: 500,
    });
  }

  return Response.json( results.shift() )
}

export const onRequestDelete: PagesFunction<Env> = async (context) => {
  const blogFormData = await context.request.formData();

  const conditions = { id: blogFormData.get('id') }

  const { success } = await remove(
      context.env.DB,
      "blog", 
      conditions
  );

  if( success !== true ) {
    return new Response("something went wrong", {
      status: 500,
    });
  }

  return new Response("successfully deleted blog post with id:" + conditions.id, {
    status: 200,
  });
}
```

# What this wrapper doesn't do
It doesn't create migrations or prepare schema for your database. Also does not perform validation or any type of sanitization to parameters. Check out the single file source for more clarity.
npm package: @s32n/dry
Description: ♺ utility components for vue3
Author: simultsop
Latest version: 0.0.3

# DRY Components

DRY (Don't Repeat Yourself) Components is a collection of bare minimum utility components for Vue.js applications.

## Installation

Install the DRY components package via npm:

```bash
npm install @s32n/dry
```

## Usage

Import and use DRY components in your Vue.js application:

```js
import { defineComponent } from 'vue'
import { Dev, Prod, Inspect } from '@s32n/dry'

export default defineComponent({
  components: {
    Dev,
    Prod,
    Inspect
  },
  // ... rest of your component
})
```

## Components

### Dev

Environment based rendering

**Basic Usage:**

```vue
<template>
  <dev>
    Show only in dev mode
  </dev>
</template>

<script setup>
import { Dev } from '@simultsop/dry'
</script>
```

### Prod

Environment based rendering

**Basic Usage:**

```vue
<template>
  <prod>
    Show only in production mode
  </prod>
</template>

<script setup>
import { Prod } from '@s32n/dry'
</script>
```

### Inspect

Inspect data and alike

**Basic Usage:**

```vue
<template>
  <inspect :data="anyData"/>
</template>

<script setup>
import { Inspect } from '@s32n/dry'
const anyData = {
  many: "properties",
  toBe: "inspected"
}
</script>
```
npm package: @s360-utils/jest-extends
Description: Additional Jest matchers
Author: Jedliu
Latest version: 0.0.1

# jest-extends

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build jest-extends` to build the library.

## Running unit tests

Run `nx test jest-extends` to execute the unit tests via [Jest](https://jestjs.io).

## Special thanks to projects
[jest-file-snapshot](https://github.com/satya164/jest-file-snapshot)
npm package: @s360-utils/util-kits
Description: Useful util kits
Latest version: 0.0.1

# util-kits

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build util-kits` to build the library.

## Running unit tests

Run `nx test util-kits` to execute the unit tests via [Jest](https://jestjs.io).
npm package: @s3bubble/videojs-s3bubble-bitrate-switcher
Description: Switching bitrate for S3Bubble player
Author: S3bubble
Latest version: 0.0.6

# videojs-s3bubble-bitrate-switcher

Switching bitrates for S3Bubble player

## Table of Contents

<!-- START doctoc -->
<!-- END doctoc -->
## Installation

```sh
npm install --save videojs-s3bubble-bitrate-switcher
```

## Usage

To include videojs-s3bubble-bitrate-switcher on your website or web application, use any of the following methods.

### `<script>` Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin _after_ you include [video.js][videojs], so that the `videojs` global is available.

```html
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-s3bubble-bitrate-switcher.min.js"></script>
<script>
  var player = videojs('my-video');

  player.s3BubbleBitrateSwitcher();
</script>
```

### Browserify/CommonJS

When using with Browserify, install videojs-s3bubble-bitrate-switcher via npm and `require` the plugin as you would any other module.

```js
var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-s3bubble-bitrate-switcher');

var player = videojs('my-video');

player.s3BubbleBitrateSwitcher();
```

### RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and `require` the plugin as you normally would:

```js
require(['video.js', 'videojs-s3bubble-bitrate-switcher'], function(videojs) {
  var player = videojs('my-video');

  player.s3BubbleBitrateSwitcher();
});
```

## License

MIT. Copyright (c) S3bubble &lt;support@s3bubble.com&gt;


[videojs]: http://videojs.com/
npm package: @s3bubble/videojs-s3bubble-mediatailor
Description: Mediatailor
Author: S3bubble
Latest version: 0.0.3

# videojs-s3bubble-mediatailor

Mediatailor

## Table of Contents

<!-- START doctoc -->
<!-- END doctoc -->
## Installation

```sh
npm install --save videojs-s3bubble-mediatailor
```

## Usage

To include videojs-s3bubble-mediatailor on your website or web application, use any of the following methods.

### `<script>` Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin _after_ you include [video.js][videojs], so that the `videojs` global is available.

```html
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-s3bubble-mediatailor.min.js"></script>
<script>
  var player = videojs('my-video');

  player.s3BubbleMediatailor();
</script>
```

### Browserify/CommonJS

When using with Browserify, install videojs-s3bubble-mediatailor via npm and `require` the plugin as you would any other module.

```js
var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-s3bubble-mediatailor');

var player = videojs('my-video');

player.s3BubbleMediatailor();
```

### RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and `require` the plugin as you normally would:

```js
require(['video.js', 'videojs-s3bubble-mediatailor'], function(videojs) {
  var player = videojs('my-video');

  player.s3BubbleMediatailor();
});
```

## License

MIT. Copyright (c) S3bubble &lt;support@s3bubble.com&gt;


[videojs]: http://videojs.com/
npm package: @s3bubble/videojs-s3bubble-settings-menu
Description: S3Bubble player settings menu
Author: S3bubble
Latest version: 0.0.3

# videojs-s3bubble-settings-menu

S3Bubble player settings menu

## Table of Contents

<!-- START doctoc -->
<!-- END doctoc -->
## Installation

```sh
npm install --save videojs-s3bubble-settings-menu
```

## Usage

To include videojs-s3bubble-settings-menu on your website or web application, use any of the following methods.

### `<script>` Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin _after_ you include [video.js][videojs], so that the `videojs` global is available.

```html
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-s3bubble-settings-menu.min.js"></script>
<script>
  var player = videojs('my-video');

  player.s3BubbleSettingsMenu();
</script>
```

### Browserify/CommonJS

When using with Browserify, install videojs-s3bubble-settings-menu via npm and `require` the plugin as you would any other module.

```js
var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-s3bubble-settings-menu');

var player = videojs('my-video');

player.s3BubbleSettingsMenu();
```

### RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and `require` the plugin as you normally would:

```js
require(['video.js', 'videojs-s3bubble-settings-menu'], function(videojs) {
  var player = videojs('my-video');

  player.s3BubbleSettingsMenu();
});
```

## License

MIT. Copyright (c) S3bubble &lt;support@s3bubble.com&gt;


[videojs]: http://videojs.com/
npm package: @s3pweb/capacitor-http
Description: A native HTTP plugin for CORS-free requests and file transfers
Author: Stéphane GUILLY
Latest version: 0.2.6

# @s3pweb/capacitor-http

A native HTTP plugin for CORS-free requests and file transfers

## Install

```bash
npm install @s3pweb/capacitor-http
npx cap sync
```

## API

<docgen-index>

* [`echo(...)`](#echo)
* [`uploadFile(...)`](#uploadfile)
* [Interfaces](#interfaces)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### echo(...)

```typescript
echo(options: { value: string; }) => Promise<{ value: string; }>
```

| Param         | Type                            |
| ------------- | ------------------------------- |
| **`options`** | <code>{ value: string; }</code> |

**Returns:** <code>Promise&lt;{ value: string; }&gt;</code>

--------------------


### uploadFile(...)

```typescript
uploadFile(options: HttpUploadFileOptions) => Promise<HttpUploadFileResult>
```

| Param         | Type                                                                    |
| ------------- | ----------------------------------------------------------------------- |
| **`options`** | <code><a href="#httpuploadfileoptions">HttpUploadFileOptions</a></code> |

**Returns:** <code>Promise&lt;<a href="#httpuploadfileresult">HttpUploadFileResult</a>&gt;</code>

--------------------


### Interfaces


#### HttpUploadFileResult


#### HttpUploadFileOptions

| Prop                | Type                | Description                                                    |
| ------------------- | ------------------- | -------------------------------------------------------------- |
| **`url`**           | <code>string</code> | The URL to upload the file to                                  |
| **`name`**          | <code>string</code> | The field name to upload the file with                         |
| **`blob`**          | <code>any</code>    | For uploading a file on the web, a JavaScript Blob to upload   |
| **`Authorization`** | <code>string</code> | For uploading a file natively, the Authorization header to use |

</docgen-api>
npm package: @s3pweb/keycloak-admin-client-cjs
Description: Keycloak Admin Client compiled in CommonJS.
Author: s3pweb
Latest version: 26.5.7

# Keycloak Admin Client in CommonJS

This lib exports the [@keycloak/keycloak-admin-client](https://www.npmjs.com/package/@keycloak/keycloak-admin-client) 
(an ECMA Script module) as a CommonJS module, so it can be used in NestJS.

This repo is based on an idea by [Manuelbaun](https://github.com/Manuelbaun) on this issue https://github.com/keycloak/keycloak-nodejs-admin-client/issues/523

The version number of this repo will follow the version number of @keycloak/keycloak-admin-client.

## Install

```shell
npm i @s3pweb/keycloak-admin-client-cjs
```

## Usage

```ts
import { KeycloakAdminClient } from '@s3pweb/keycloak-admin-client-cjs';

@Injectable()
export class KeycloakService {
    private readonly kcAdminClient: KeycloakAdminClient;

    constructor(logger: LoggingService) {
        this.log = logger.getLogger(KeycloackService.name);
        this.kcAdminClient = new KeycloakAdminClient();
    }

}
```

## How to release

First, compile and build the project:

```shell
npm i
npm run prepublish
```

To release a new version, you can use the `release` script with the keycloak-admin-client version as an argument:

```shell
npm run release -- --release-as <NEW_VERSION>
```

Then push the changes and the new tag to the main branch:

```shell
git push origin main --follow-tags
```
npm package: @s3pweb/node-otlp-tracer
Description: A open telemetry tracer for node JS
Author: s3pweb
Latest version: 1.0.1

# S3PWeb - NodeJS open telemetry tracer

## Install

```shell
npm i @s3pweb/node-otlp-tracer
```

## Examples

See the `./examples` folder. To run them, you need an OTLP server like Tempo (https://github.com/grafana/tempo).

The included docker-compose.yaml starts a Tempo, a prometheus and a grafana service.
```shell
docker compose up
```
npm package: @s3pweb/release-message-creator
Description: Create a formatted release message from a standard-release changelog
Author: s3pweb
Latest version: 1.1.0

[![npm (scoped)](https://img.shields.io/npm/v/@s3pweb/release-message-creator)](https://www.npmjs.com/package/@s3pweb/release-message-creator)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

# Release message creator

Create a formatted release message from a [standard-release](https://github.com/conventional-changelog/standard-version) changelog.

## Installation

```shell
npm install -g @s3pweb/release-message-creator
```

## Usage

### create-release-message

The `create-release-message` command creates a release message with a title and the last version changes. 
It takes 3 optionals arguments:

- `-f` The path to the changelog file.
- `-m` A message template with up to 2 placeholders (`%s`) for the new version and the old version (in that order).
- `-w` The full webhook url to send the message to. (e.g. `https://discord.com/api/webhooks/123456789/abcdefghijklmnopqrstuvwxyz`).

```shell
create-release-message -f <changelog location> -m <message> -w <webhook discord>
```

```shell
create-release-message -f ./CHANGELOG.md -m "Release API X, version %s (replacing %s) :" -w ${WEBHOOK}
```

Result:

```
Release API X, version 0.0.5 (replacing 0.0.4):

## [0.0.5] (2022-05-24)

### Features
* **actions:** add an automatic release action 
* **webhook:** add axios to call the webhook 
```

### create-github-message

The `create-release-message` command creates a JSON string compatible with GitHub API. 
It takes 1 optional argument:

- `-f` The path to the changelog file.

```shell
create-github-message -f <changelog location>
```

```shell
create-github-message -f ./CHANGELOG.md
```

Result:

```shell
"## [0.0.5](https://github.com/s3pweb/release-message-creator/compare/v0.0.4...v0.0.5) (2022-05-24)\n\n### Features\n* **actions:** add an automatic release action ([5589f88](https://github.com/s3pweb/release-message-creator/commit/5589f88366c2690c1648fb8d82b70affac1c1904))\n* **webhook:** add axios to call the webhook ([830adb9](https://github.com/s3pweb/release-message-creator/commit/830adb9afb61dbd33823f31e8606525c9d59999f))"
```
npm package: @s3rglx/jsonresume-theme-kendall-german
Description: A JSON Resume theme built with bootstrap by M. Adam Kendall. This poject is an updated fork of the forked German version 0.2.0 made by Dominik Schmid.
Author: Sergej Lopatin
Latest version: 0.1.0

# jsonresume-theme-kendall-german

This is a German translated fork of M. Adam Kendall's original [jsonresume-theme-kendall](https://github.com/LinuxBozo/jsonresume-theme-kendall/blob/master/README.md). Please contact M. Adam Kendall directly for any issues which are not related to the German translation.

## Changes made

* translation of relevant English terms into German
* adoption of address layout to German standards
* commented out volunteer section in index.js as I personally had no use for it

Note that even though it is mentioned in the original project that

> Every section is optional. If you do not include the publications array in your resume.json, no publications section will appear.

I experienced that this is not true for the volunteer section. Deleting the volunteer section in the resume.json file lead to errors. As a quick fix I therefore disabled it by commenting it out in the index.js file. Should you have use for it please uncomment it again.

"Grade" in the section awards was translated to "Abschluss". This allows listing certificates or other distinctions.

Regarding the usage of the theme I refer to the original project instructions of [M. Adam Kendall](https://github.com/LinuxBozo/jsonresume-theme-kendall) and the ones of [jsonresume.org](https://jsonresume.org/) in general.
npm package: @s3rver/nuxt-modal
Description: Very simple modal for nuxt framework
Author: Alireza Fakharzadeh
Latest version: 1.1.5

## Very simple modal for nuxt framework

### [Demo Page](https://s3rver.github.io/nuxt-modal)

https://user-images.githubusercontent.com/51977254/169375875-33904498-5449-42b4-89c9-77c9f22909ef.mp4

```bash
# install module
$ npm i @s3rver/nuxt-modal
```

## Steps of use

### 1 - Add module to nuxt.config.js

```javascript
// nuxt.config.js
export default {
    //...
    modules: ['@s3rver/nuxt-modal']
    //...
}
```

### 2 - Register modals for layout

```vue

<template>
    <div>
        <nuxt />

        <!-- added line -->
        <register-modals />
    </div>
</template>
```

### 3 - Making directory modals

In the main root of the project, create a directory called `modals` and save your modals with the `vue` extension

## options

### nuxt.config.js

#### `default` options

```javascript
// nuxt.config.js
export default {
    //...
    modal: {
        pluginName: "modal", // name plugin 
        layout: "default", // layout desktop
        mobileLayout: "defaultMobile", // layout mobile
        mobileSize: 400, // mobile or desktop window size
        responsive: false,
    },

    modules: ['@s3rver/nuxt-modal']
    //...
}
```

### Responsive

#### Responsive value is disabled by default and you must define separate components for mobile and desktop dimensions

#### `If enabled, you do not need to create two components`
![image](https://user-images.githubusercontent.com/51977254/169388851-59ee05ac-ad3c-4ab9-b075-677df6a2fd47.png)


### layout & mobileLayout

#### The value is equal to the name of the registered component 



## Making Custom Layout

#### [Sample desktop layout](https://github.com/S3RVER/nuxt-modal/blob/v1/template/layouts/default.vue)
#### [Sample mobile layout](https://github.com/S3RVER/nuxt-modal/blob/v1/template/layouts/defaultMobile.vue)

![image](https://user-images.githubusercontent.com/51977254/169386837-34ff3b41-ea76-4810-8ce7-b88b7761e28a.png)
### And then open the modal
![image](https://user-images.githubusercontent.com/51977254/169388119-acc526e3-251f-41ef-832e-f91219bd697e.png)
npm package: @s3xysteak/vite-plugin-externals
Description: externals plugin for vite
Author: crcong
Latest version: 0.0.5

# vite-plugin-externals

<p>
  <a href="https://www.npmjs.com/package/vite-plugin-externals" target="_blank">
    <img alt="NPM package" src="https://img.shields.io/npm/v/vite-plugin-externals.svg?style=flat">
  </a>
  <a href="https://www.npmjs.com/package/vite-plugin-externals" target="_blank">
    <img alt="downloads" src="https://img.shields.io/npm/dt/vite-plugin-externals.svg?style=flat">
  </a>
  <a href="https://github.com/vitejs/awesome-vite#helpers" target="_blank">
    <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome">
  </a>
</p>

[English](README.md) | 简体中文

使用外部库，类似webpack的externals，但现在只支持浏览器环境。

可以不另外配置 `rollup` 的选项，就可以使用在生产环境。

但是在默认配置下在 `commonjs` 环境中不生效，例如 `ssr`。

## 用法

```bash
npm i vite-plugin-externals -D
```

增加配置在 `vite.config.js`

```js
// vite.config.js
import { viteExternalsPlugin } from 'vite-plugin-externals'

export default {
  plugins: [
    viteExternalsPlugin({
      vue: 'Vue',
      react: 'React',
      'react-dom': 'ReactDOM',
      // 支持值链式取值，会转换成 window['React']['lazy']
      lazy: ['React', 'lazy']
    }),
  ]
}
```

**警告**: 如果你在开发环境中，引入了生产环境的库, 可能会使得 `HMR` 失败。

你也可以使用 `disableInServe: true` 避免在 serve 模式中转换。

例如：
```html
<!-- 可能会使 HMR 失败 -->
<script src="./vue.global.prod.js"></script>

<!-- 这样不会 -->
<script src="./vue.global.js"></script>
```

## 原理

转换js的源代码。

```js
// 选项
viteExternalsPlugin({
  vue: 'Vue',
}),
// 源代码
import Vue from 'vue'
// 转换后
const Vue = window['Vue']

// 源代码
import { reactive, ref as r } from 'vue'
// 转换后
const reactive = window['Vue'].reactive
const r = window['Vue'].ref

// 源代码
import * as vue from 'vue'
// 转换后
const vue = window['Vue']

// 源代码
export { useState as _useState } from 'react'
// 转换后
export const _useState = window['React'].useState
```

**注意**: 请使用该插件前，需要把代码转换成js，因为此插件只能解析js代码，例如：

```js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue(), // @vitejs/plugin-vue 将会把SFC的代码转换成js代码

    // 所以这插件要放在@vitejs/plugin-vue的下面
    viteExternalsPlugin({
      vue: 'Vue',
    }),
  ]
}
```

如果出现异常报错，可以查看是否因为插件顺序引起的报错。

## 配置选项

### disableInServe

在 `serve` 模式中禁止转换 `external` 代码。

```js
viteExternalsPlugin({
  vue: 'Vue',
}, { disableInServe: true })
```

### enforce

vite 插件顺序。 解决由于 vite 插件顺序引起的异常。 例如 [#21](https://github.com/crcong/vite-plugin-externals/issues/21).

详细可以查看 [https://vitejs.dev/guide/api-plugin.html#plugin-ordering](https://vitejs.dev/guide/api-plugin.html#plugin-ordering) 。

### filter

此插件会默认过滤 `node_modules` 下的文件，只转换 js/ts/vue/jsx/tsx 文件。

你可以指定 `filter` 函数，返回 `true` 将会进行转换成外部变量。

```js
viteExternalsPlugin({
  vue: 'Vue',
}, {
  filter(code, id, ssr) {
    // 你的代码
    return false
  }
}),
```

### useWindow

默认为 `true` , 设置 `false` , `window` 的作用域将不会加上。

**注意**: 如果模块名有特殊字符，例如 `/`，设置useWindow选项 `false` 将引发错误。

```js
viteExternalsPlugin({
  vue: 'Vue',
}, { useWindow: false }),

// 源代码
import Vue from 'vue'
// 转换后, 不是 `const Vue = window['Vue']`
const Vue = Vue
```

### sourceMapOptions

转换后代码sourceMap的配置项，库是 `magic-string` 。
npm package: @s4609745/react-glow-loader
Description: A simple glowing loader component for React
Author: s4609745
Latest version: 1.0.0


# React Glow Loader

A simple glowing spinner/loader component for React applications.

## Installation

```bash
npm install @s4609745/react-glow-loader
```

## Usage

```tsx
import { GlowLoader } from '@s4609745/react-glow-loader';
import '@s4609745/react-glow-loader/dist/style.css';

function App() {
  return (
    <div>
      <GlowLoader />
    </div>
  );
}
```

## License

MIT