open-index/open-npm huggingface dataset:
npm package: @kopilot/gatsby-theme-apollo
Description: Sets up your Gatsby website for use with Apollo
Author: Trevor Blades
Latest version: 3.1.0

# gatsby-theme-apollo

A Gatsby theme that sets up your website for use with [Apollo Client](https://www.apollographql.com/docs/react/v3.0-beta).

## Installation

This theme is meant to be used with the `@apollo/client` package. If you aren't already using it, make sure you install it along with this theme.

> **Important:** `@apollo/client` is currently in beta. If you want to use this theme with `apollo-boost` or `apollo-client`, you can install `gatsby-theme-apollo@2`.

```bash
npm install gatsby-theme-apollo @apollo/client
```

## Usage

Add `gatsby-theme-apollo` as a plugin in your Gatsby config.

```js
// gatsby-config.js
module.exports = {
  plugins: ['gatsby-theme-apollo']
};
```

**Required:** [Shadow](https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/) this theme's `client.js` file with your own `ApolloClient` instance. Check out the Apollo docs to learn more about [creating a client](https://www.apollographql.com/docs/react/v3.0-beta/essentials/get-started/#create-a-client).

However you decide to create your client, you should make sure that:

1. You provide an isomorphic `fetch` implementation (such as [`isomorphic-fetch`](https://github.com/matthew-andrews/isomorphic-fetch)) as an option to `HttpLink`
2. Your client is the default export in `client.js`

```js
// src/gatsby-theme-apollo/client.js
import fetch from 'isomorphic-fetch';
import {ApolloClient, HttpLink, InMemoryCache} from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'https://api.spacex.land/graphql/',
    fetch
  })
});

export default client;
```

## License

[MIT](../../LICENSE)
npm package: @kopjra/embedpdf-react-pdf-viewer
Description: React component for embedding PDF documents
Latest version: 1.0.0

# @kopjra/embedpdf-react-pdf-viewer

React component for embedding PDF documents with full-featured viewing capabilities.

## Installation

```bash
npm install @kopjra/embedpdf-react-pdf-viewer
# or
pnpm add @kopjra/embedpdf-react-pdf-viewer
# or
yarn add @kopjra/embedpdf-react-pdf-viewer
```

## Usage

```tsx
import { PDFViewer } from '@kopjra/embedpdf-react-pdf-viewer';

function App() {
  return (
    <PDFViewer
      config={{
        src: '/document.pdf',
        theme: { preference: 'system' },
        zoom: { defaultLevel: 'fit-width' },
      }}
      style={{ width: '100%', height: '100vh' }}
      onReady={(registry) => {
        console.log('PDF viewer ready', registry);
      }}
    />
  );
}
```

## Props

| Prop        | Type                  | Description                              |
| ----------- | --------------------- | ---------------------------------------- |
| `config`    | `PDFViewerConfig`     | Full configuration object for the viewer |
| `className` | `string`              | CSS class name for the container         |
| `style`     | `CSSProperties`       | Inline styles for the container          |
| `onInit`    | `(container) => void` | Callback when viewer is initialized      |
| `onReady`   | `(registry) => void`  | Callback when registry is ready          |

The `config` prop accepts all configuration options from `@kopjra/embedpdf-snippet`, including:

- `src` - URL or path to the PDF document
- `theme` - Theme configuration
- `zoom` - Zoom configuration
- `scroll` - Scroll configuration
- `annotations` - Annotation configuration
- And more...

## Accessing the Registry

Use a ref to access the viewer container and registry:

```tsx
import { useRef } from 'react';
import { PDFViewer, PDFViewerRef } from '@kopjra/embedpdf-react-pdf-viewer';

function App() {
  const viewerRef = useRef<PDFViewerRef>(null);

  const handleClick = async () => {
    const registry = await viewerRef.current?.registry;
    // Use registry to access plugins
  };

  return (
    <>
      <PDFViewer
        ref={viewerRef}
        config={{ src: '/document.pdf' }}
        style={{ width: '100%', height: '100vh' }}
      />
      <button onClick={handleClick}>Get Registry</button>
    </>
  );
}
```

## Re-exports

This package re-exports everything from `@kopjra/embedpdf-snippet`, so you can import types and utilities directly:

```tsx
import {
  PDFViewer,
  ZoomPlugin,
  ScrollPlugin,
  type PDFViewerConfig,
  type PluginRegistry,
} from '@kopjra/embedpdf-react-pdf-viewer';
```

## License

MIT
npm package: @kopjra/embedpdf-snippet
Description: <div align="center">   <a href="https://www.embedpdf.com">     <img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">   </a>
Latest version: 1.0.0

<div align="center">
  <a href="https://www.embedpdf.com">
    <img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">
  </a>

  <h1>EmbedPDF Snippet</h1>
  <p>The easiest way to embed PDF files in your website with a complete, ready‑to‑use interface.</p>

<a href="https://www.embedpdf.com/docs/snippet/introduction"><img alt="Documentation" src="https://img.shields.io/badge/View%20Docs-0af?style=for-the-badge&labelColor=000000"></a>
<a href="https://snippet.embedpdf.com/"><img alt="Live Demo" src="https://img.shields.io/badge/Try%20Live%20Demo-ff1493.svg?style=for-the-badge&labelColor=000000"></a>

</div>

---

## 📚 Documentation

The full walkthrough, advanced examples, and API reference live in our docs site:

👉 **[https://www.embedpdf.com/docs/snippet/introduction](https://www.embedpdf.com/docs/snippet/introduction)**

---

## 🚀 Introduction

**EmbedPDF Snippet** is a _“batteries‑included”_ drop‑in that turns any `<div>` into a professional PDF reader. No build step, no framework lock‑in—just copy, paste, and you’re done.

### Why choose the Snippet?

- **Complete UI out‑of‑the‑box** – toolbar, thumbnails, search, zoom & more
- **Zero build tooling** – works in plain HTML pages or alongside any JS framework
- **30‑second setup** – a single `<script type="module">` is all you need
- **Fully configurable** – tweak behavior with a lightweight options object
- **Runs everywhere** – modern browsers, frameworks, static sites & CMSes

---

## ⚡️ Quick Install

Add the CDN module and point it at a container:

```html filename="index.html" copy
<div id="pdf-viewer" style="height: 500px"></div>
<script async type="module">
  import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js';

  EmbedPDF.init({
    type: 'container', // mount strategy
    target: document.getElementById('pdf-viewer'),
    src: 'https://snippet.embedpdf.com/ebook.pdf', // your PDF URL
  });
</script>
```

That’s it—refresh and enjoy a full‑featured viewer.

---

## 🛠 Basic Usage Pattern

1. **Container** – create a DOM element where the viewer will render.
2. **Import** – load `embedpdf.js` from the CDN with `type="module"`.
3. **Initialize** – call `EmbedPDF.init()` with your configuration.

### Minimal Example

```html filename="basic-example.html" copy
<!DOCTYPE html>
<html>
  <head>
    <title>My PDF Viewer</title>
  </head>
  <body>
    <div id="pdf-viewer" style="height: 100vh"></div>
    <script async type="module">
      import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js';

      EmbedPDF.init({
        type: 'container',
        target: document.getElementById('pdf-viewer'),
        src: 'https://snippet.embedpdf.com/ebook.pdf',
      });
    </script>
  </body>
</html>
```

## 📄 License

EmbedPDF Snippet is [MIT licensed](https://github.com/embedpdf/embed-pdf-viewer/blob/main/LICENSE). Commercial use is welcome—just keep the copyright headers intact.
npm package: @kopjra/embedpdf-svelte-pdf-viewer
Description: Svelte component for embedding PDF documents
Latest version: 1.0.0

# @kopjra/embedpdf-svelte-pdf-viewer

Svelte component for embedding PDF documents with full-featured viewing capabilities.

## Installation

```bash
npm install @kopjra/embedpdf-svelte-pdf-viewer
# or
pnpm add @kopjra/embedpdf-svelte-pdf-viewer
# or
yarn add @kopjra/embedpdf-svelte-pdf-viewer
```

## Usage

```svelte
<script>
  import { PDFViewer } from '@kopjra/embedpdf-svelte-pdf-viewer';

  const config = {
    src: '/document.pdf',
    theme: { preference: 'system' },
  };

  function onReady(event) {
    console.log('PDF viewer ready', event.detail);
  }
</script>

<PDFViewer {config} style="width: 100%; height: 100vh;" on:ready={onReady} />
```

## Props

| Prop     | Type              | Description                              |
| -------- | ----------------- | ---------------------------------------- |
| `config` | `PDFViewerConfig` | Full configuration object for the viewer |
| `class`  | `string`          | CSS class name for the container         |
| `style`  | `string`          | Inline styles for the container          |

The `config` prop accepts all configuration options from `@kopjra/embedpdf-snippet`, including:

- `src` - URL or path to the PDF document
- `theme` - Theme configuration
- `zoom` - Zoom configuration
- `scroll` - Scroll configuration
- `annotations` - Annotation configuration
- And more...

## Events

| Event   | Detail              | Description                      |
| ------- | ------------------- | -------------------------------- |
| `init`  | `EmbedPdfContainer` | Fired when viewer is initialized |
| `ready` | `PluginRegistry`    | Fired when registry is ready     |

## Accessing the Registry

Use bind: directives to access the viewer container and registry:

```svelte
<script>
  import { PDFViewer } from '@kopjra/embedpdf-svelte-pdf-viewer';

  let container;
  let registry;

  async function handleClick() {
    const reg = await registry;
    // Use registry to access plugins
  }
</script>

<PDFViewer
  bind:container
  bind:registry
  config={{ src: '/document.pdf' }}
  style="width: 100%; height: 100vh;"
/>
<button on:click={handleClick}>Get Registry</button>
```

## License

MIT
npm package: @kopjra/embedpdf-vue-pdf-viewer
Description: Vue component for embedding PDF documents
Latest version: 1.0.0

# @kopjra/embedpdf-vue-pdf-viewer

Vue 3 component for embedding PDF documents with full-featured viewing capabilities.

## Installation

```bash
npm install @kopjra/embedpdf-vue-pdf-viewer
# or
pnpm add @kopjra/embedpdf-vue-pdf-viewer
# or
yarn add @kopjra/embedpdf-vue-pdf-viewer
```

## Usage

```vue
<template>
  <PDFViewer
    :config="{
      src: '/document.pdf',
      theme: { preference: 'system' },
    }"
    :style="{ width: '100%', height: '100vh' }"
    @ready="onReady"
  />
</template>

<script setup lang="ts">
import { PDFViewer } from '@kopjra/embedpdf-vue-pdf-viewer';
import type { PluginRegistry } from '@kopjra/embedpdf-vue-pdf-viewer';

function onReady(registry: PluginRegistry) {
  console.log('PDF viewer ready', registry);
}
</script>
```

## Props

| Prop     | Type              | Description                              |
| -------- | ----------------- | ---------------------------------------- |
| `config` | `PDFViewerConfig` | Full configuration object for the viewer |
| `class`  | `string`          | CSS class name for the container         |
| `style`  | `CSSProperties`   | Inline styles for the container          |

The `config` prop accepts all configuration options from `@kopjra/embedpdf-snippet`, including:

- `src` - URL or path to the PDF document
- `theme` - Theme configuration
- `zoom` - Zoom configuration
- `scroll` - Scroll configuration
- `annotations` - Annotation configuration
- And more...

## Events

| Event   | Payload             | Description                        |
| ------- | ------------------- | ---------------------------------- |
| `init`  | `EmbedPdfContainer` | Emitted when viewer is initialized |
| `ready` | `PluginRegistry`    | Emitted when registry is ready     |

## Accessing the Registry

Use a template ref to access the viewer container and registry:

```vue
<template>
  <PDFViewer
    ref="viewerRef"
    :config="{ src: '/document.pdf' }"
    :style="{ width: '100%', height: '100vh' }"
  />
  <button @click="handleClick">Get Registry</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PDFViewer, type PDFViewerExpose } from '@kopjra/embedpdf-vue-pdf-viewer';

const viewerRef = ref<PDFViewerExpose | null>(null);

async function handleClick() {
  const registry = await viewerRef.value?.registry;
  // Use registry to access plugins
}
</script>
```

## License

MIT
npm package: @kopkong/web-ui
Description: WEB UI Library used in greenhouse projects.
Latest version: 1.0.15

## WebUI

Greenhouse UI库。可用组件有(v0.7.2)：

* Action Button
* Button
* Calendar
* Checkbox
* Confirm
* Context Menu
* Control Box（Form Control的容器）
* Cropper（图片裁剪）
* Dialog
* Drop Down（下拉列表）
* Grid
* Icon
* Input File
* List
* Loading
* Location（省市区选择）
* Message(从页面底部或上部弹出的消息，同一时间只有一个存在)
* Modal
* Notification（从右上角弹出的通知，可以同时有多个一起存在）
* Radio
* Search
* Step
* Switch
* Tab
* Tooltip


## 项目目录

-- demo UI库示例代码

-- src UI库源代码


## 命令行

编译打包示例项目： npm run build
发布部署示例项目：npm run deploy
打包Angular库： npm run build:lib

## 发布／引用 UI库

* 打包为Angular库之后，切换到publish分支，运行 `node publish.js`。
* 在需要引用UI库的项目中添加依赖 `"web-ui": "git+https://bitbucket.honeywell.com/scm/grhse/webui.git#publish"`
npm package: @koppa/cli
Description: Koppa CLI is the standard and helpful tool for Koppa.js development.
Author: MightyLopers, Bastian Bensch
Latest version: 1.0.0



<p align="center">
<a href="https://koppajs.org" target="_blank"><img width="100" src="https://koppajs.org/images/koppa_logo.png" alt="Koppa logo"></a>
</p>

<p align="center">
<a href="https://npmcharts.com/compare/@koppa/cli?minimal=true" target="_blank"><img src="https://img.shields.io/npm/dm/@koppa/cli?color=%2333d4df" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/@koppa/cli"><img src="https://img.shields.io/npm/v/@koppa/cli?color=%2395c6f8" alt="Version"></a>
<a href="http://opensource.org/licenses/MIT" target="_blank"><img src="https://img.shields.io/npm/l/@koppa/cli?color=%23ecbbd9" alt="License"></a>
</p>

## Introduction

Koppa.js is a progressive client-side rendering framework for building single page applications which gets along without virtual **DOM**. It consists of an **easy to use** core library that covers the most important functionalities of a single page application.

The **CLI Package** is the standard and helpful tool for Koppa.js development. You can easily create a project structure either with sample data or without.

## Getting Started

Install the package **global** on your mashine

```console
npm install -g @koppa/cli
```
Then go to a directory where you want to start your Koppa.js project. Open console again and write the folowing.

```console
koppa create <name of your project>
```

Follow the instructions in the console and your Koppa.js project is ready to use.

## Ecosystem

| Project       | Status                             | Description                     |
|---------------|------------------------------------|---------------------------------|
| [core]        | [![core-status]][core-package]     | Single-page rendering framework |
| [cli]         | [![cli-status]][cli-package]       | Project scaffolding    |


[core]: https://github.com/koppajs/core
[core-status]: https://img.shields.io/npm/v/@koppa/core?color=%2395c6f8
[core-package]: https://npmjs.com/package/@koppa/core

[cli]: https://github.com/koppajs/cli
[cli-status]: https://img.shields.io/npm/v/@koppa/cli?color=%2395c6f8
[cli-package]: https://npmjs.com/package/@koppa/cli

## Documentation

coming soon...

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2020-present, MightyLopers, Bastian Bensch (Sortex)
npm package: @koppa/core
Description: Koppa.js is a progressive client-side rendering framework for building single page applications which gets along without virtual DOM.
Author: MightyLopers, Bastian Bensch
Latest version: 1.0.1


<p align="center">
<a href="https://koppajs.org" target="_blank"><img width="100" src="https://koppajs.org/images/koppa_logo.png" alt="Koppa logo"></a>
</p>

<p align="center">
<a href="https://npmcharts.com/compare/@koppa/core?minimal=true" target="_blank"><img src="https://img.shields.io/npm/dm/@koppa/core?color=%2333d4df" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/@koppa/core"><img src="https://img.shields.io/npm/v/@koppa/core?color=%2395c6f8" alt="Version"></a>
<a href="http://opensource.org/licenses/MIT" target="_blank"><img src="https://img.shields.io/npm/l/@koppa/core?color=%23ecbbd9" alt="License"></a>
</p>

## Introduction

Koppa.js is a progressive client-side rendering framework for building single page applications which gets along without virtual **DOM**. It consists of an **easy to use** core library that covers the most important functionalities of a single page application.

## Overview

Here is a small list what Koppa.js **Core** offers.

1. Pages, Components (single File Templates)
2. JS-Module (extend the functionality)
3. routing
4. templating
5. live data and watching

and many more...

## Ecosystem

| Project       | Status                             | Description                     |
|---------------|------------------------------------|---------------------------------|
| [core]        | [![core-status]][core-package]     | Single-page rendering framework |
| [cli]         | [![cli-status]][cli-package]       | Project scaffolding    |


[core]: https://github.com/koppajs/core
[core-status]: https://img.shields.io/npm/v/@koppa/core?color=%2395c6f8
[core-package]: https://npmjs.com/package/@koppa/core

[cli]: https://github.com/koppajs/cli
[cli-status]: https://img.shields.io/npm/v/@koppa/cli?color=%2395c6f8
[cli-package]: https://npmjs.com/package/@koppa/cli

## Documentation

coming soon...

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2020-present, MightyLopers, Bastian Bensch (Sortex)
npm package: @kopplin/commitlint
Description: Shareable commitlint
Latest version: 0.0.1

# @kopplin/commitlint

[![npm version](https://badge.fury.io/js/%40kopplin%2Fcommitlint.svg)](https://badge.fury.io/js/%40kopplin%2Fcommitlint)

Kopplin's shared [CommitLint](https://commitlint.js.org/) configuration.

## Setup

1. Install the packages

```sh
npm i -D @kopplin/commitlint @commitlint/cli husky
```

2. Install Husky

```sh
npx husky install
```

3. Add Hook

```sh
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
```

4. Setup config file

After installing it, apply the config to commitlint by running the following command:

```bash
echo "module.exports = { extends: ['@kopplin/commitlint'] };" > .commitlintrc.js
```
npm package: @kopplin/eslint
Description: Shared ESLint config
Author: Sergio Kopplin
Latest version: 0.0.2

# @kopplin/eslint

[![npm version](https://badge.fury.io/js/%40kopplin%2Feslint.svg)](https://badge.fury.io/js/%40kopplin%2Feslint)

Kopplin's shared [ESLint](https://eslint.org/) configuration.

## Setup

1. Install the package.

```sh
npm install -D @kopplin/eslint eslint
```

2. Add to your .eslintrc

```json
{
  "extends": ["@kopplin/eslint"],
  "parserOptions": {
    "project": "tsconfig.json"
  }
}
```
npm package: @kopplin/me
Description: me, Sérgio Kopplin
Author: Sérgio Kopplin
Latest version: 0.1.0

# Sérgio Kopplin

![](https://raw.githubusercontent.com/sergiokopplin/tools/main/packages/me/kopplin.gif)

```console
npx kopplin
```

To get my contact information.

## Credits

Thanks to [John K Paul](https://github.com/johnkpaul/johnkpaul) and [Guillermo Rauch](https://github.com/rauchg/rauchg) for the ideia!

## License

[MIT](https://github.com/sergiokopplin/licenses/blob/master/MIT-LICENSE.md) &copy; Sérgio Kopplin
npm package: @kopplin/prettier
Description: Shared prettier config
Author: Sérgio Kopplin
Latest version: 0.0.1

# @kopplin/prettier

[![npm version](https://badge.fury.io/js/%40kopplin%2Fprettier.svg)](https://badge.fury.io/js/%40kopplin%2Fprettier)

Kopplin's shared [Prettier](https://prettier.io) configuration

## Usage

**Install**:

```sh
$ npm install -D @kopplin/prettier
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@kopplin/prettier"
}
```
npm package: @kopplin/tsconfig
Description: Shared Typescript config
Author: Sérgio Kopplin
Latest version: 0.0.1

# @kopplin/tsconfig

[![npm version](https://badge.fury.io/js/%40kopplin%2Ftsconfig.svg)](https://badge.fury.io/js/%40kopplin%2Ftsconfig)

Kopplin's Shared [TypeScript config](https://www.typescriptlang.org/docs/handbook/ts-config-json.html)

## Install

```
npm install --save-dev @kopplin/tsconfig
```

## Usage

`tsconfig.json`

```json
{
  "extends": "@kopplin/tsconfig"
}
```