open-index/open-npm huggingface dataset:
npm package: @past3lle/skillforge-widget
Description: PAST3LLE SKILLFORGE component as an NPM ESM pkg.
Author: past3lle
Latest version: 2.3.2

![skillforge-150](https://raw.githubusercontent.com/PAST3LLE/past3lle-monorepo/main/apps/skillforge-ui/src/assets/png/header_bg.png) 
# SKILLFORGE WIDGET

> PAST3LLE FORGE as an NPM importable ESM React widget component

## Install
```bash
yarn add @past3lle/skillforge-widget
```

## Usage
```tsx
import SkillForge, { SkillForgeConnectedHeader } from '@past3lle/skillforge-widget'
import { FontCssProvider, createCustomTheme } from '@past3lle/theme'

const APP_THEME = createCustomTheme({ /* ...custom theme */ }) 
const SKILLTREE_CONFIG = { /* ...config object */ }

// View full example of config and more in monorepo > apps > @past3lle/skillforge-ui 
export function App() {
  return (
    <SkillForge config={SKILLTREE_CONFIG.config} maxWidth={1200} maxHeight={750}>
      {/* Optional children props */}
      <FontCssProvider />
      {/* SkillForgeConnectedHeader is an optional, exported header connected to Web3 */}
      {/* and set with themed components */}
      <SkillForgeConnectedHeader />
    </SkillForge>
  )
}

```

Please raise issues in the appropriate repos! Enjoy :)
npm package: @past3lle/skilltree-widget
Description: PAST3LLE Skilltree as an NPM importable ESM React widget component
Author: past3lle
Latest version: 0.0.4

# `skilltree-widget`

> PAST3LLE Skilltree as an NPM importable ESM React widget component

## Usage

```
const skilltreeWidget = require('skilltree-widget');

// TODO: DEMONSTRATE API
```
npm package: @past3lle/wagmi-connectors
Description: Past3lle enhanced V2 Wagmi connectors
Author: w3stside
Latest version: 2.3.2

<img width="438" alt="image" src="https://lh3.googleusercontent.com/fife/APg5EOZGB0x6KiHp8lG2eeC0VWz4Sq7eUdo_eZKJUGW-cuq1SZgAcKRGHC-Ic24BlrG7HxYHgw8DCWl-df9OYaBj5HcQLXkj0ZjaBFT-RTGhQVCAmG44b1V7vdhm0dRmGCmvLT_RhmjNQBOrwakKGdA1GnlG3u6bd2IoajIpAdmdKu4CWxacH9to9-ZHOeaW_kpmYl-k85iIGSxBNSdkbO4kI8hcEp0tkEi84vNSRHGPq8bJ1YPXOZ2MDiVxnIxrNXMi6AQUSCtB6wl3pmZcJa_iIVQ4Bhq2QFn0PgemTotNk1I662g1gX-fYzv9rgegOAfnnK6J7AQ9z-goIvFcohEQ8LrG5bjoahr1CnpVSaNW1Oj7ycuzcBfrBJkVags5MWBH-2YCsQ0FbaazH0tBUDe8kjIsrwe814ZQ1bt3IurBMgHw3wD1mAMSawOJ7xz5V45-HRvbRopciMqjX-O8ge5In5jujIc7EbghGvnVAmxyeI7eKpD5iNbFno-HhsR2UF5E3_QC5036vcpjH9GncEwp66nIGndD0H6SRYz6bHt-1rKsqxTDY7CahSkkd1tPZw0a5lMO5TnFTH3K46QAQ3uP_zkaHxg8P1rwCMfezkUorL3Ux4otxO1ZijRs-ip3EC3FuX0tHUUMUAvuCBgmotRKHU-v_tOUUNCoQOmD7UO5DYtMsvRWTHnrcBmoFyr3he2tJFrXnf_UdFhnMhJaFHVZO5Pq9Qs4_9lPnEvnT5B_SbgAJX-nuLBT2o4Ncd_NQnkyK9Occ92TjF2WLHMCHsPk-OyTNGsGuAZ52iAxQvsHBWcRaF-Ne5i2C-k6QwPgk6EtRquPsAVTb07YB_q-ZDOPpm-jsL5WLhT3WhTsaOiIg4pg5CeqTYj192c2N-Er_s2BkrU4eFpPl2mAy-C5tMECu-XIprYilg932xdapJWPHTCsWDyUM2qn28I-q6ijl_A2-UKxlsZ_QE4Z4r-AzwgNfykkE_4NpEgL-gLlDUKanasQwtg8Y1pmvzpwCD5SmEXunSm_9lxZxpSVCgo18t-PlZ6HKdcs1a9Vudw2VGa7m4E6ViiQwRsZ2R_Xo2TQfHtfZ_dTCsgW3UhBHcDVW0ziz3eC-YXiiNecIUtYsHOjRlJJhX4kfpoWCaUDnaaIk8TsH2Xd68LJKrt5kPzyYXvZVIw87WySCm29Bq_ZaAyxNUQwTVvXsx9aAK05V7w9YvbMwfyD_8WXd8cwCTf3UCjO9bX3KWIuYKcnDLPGkFQNb_wX-tcgbh9VWYTvJe0onN_mZ845Jcj0onPzgBHmVf41jlYSlo1-R4tJrHg58Ixe9DqdwL1IF2Vg4z6GrNzy20Eg2zv-o7mi5AMVMiE62B0t4c44hGbzIKYBozgdWp8h5r-arQg9Ae8muGwhG42SIeuEEZYjmW9E1A9Jw65j2DJwhIdUcOydP7ANAd3VbSi1JNAitIPKZ1gD-rlW9c1c9ZrGTzX-r1PrIOzodODzP7QDCXqjfmvyqaTQves-Ls0Al49QGAaMwJW-Gv_4f2rZvEB0_STxRLRt-AozIB5Urmxghh23uhD2JOCOnLu7tI-L_7Eq036l2gg=w2880-h1642">

# Wagmi Connectors
### This repo creates Wagmi connectors for common providers that haven't been added yet yo Wagmi's connector repo. 
### ⚠️⚠️ WARNING ⚠️⚠️ Subject to change. Likely to be deprecated/abandoned when official Wagmi connectors of the same name are released.

# Example
```ts
import { IFrameEthereumConnector, LedgerHIDConnector } from '@past3lle/wagmi-connectors'
import { addConnector } from '@past3lle/web3-modal'

export const wagmiConnectors = {
  ledgerLiveModal: addConnector(LedgerConnector, {
    enableDebugLogs: false,
    walletConnectVersion: 2,
    projectId: WALLETCONNECT_ID,
    requiredChains: [1]
  }),
  ledgerHID: addConnector(LedgerHIDConnector, {}),
  ledgerIFrame: addConnector(IFrameEthereumConnector, {})
}
```
npm package: @pastaghost/proto-tx-builder
Description: Builds and signs new-style protobuf SIGN_MODE_DIRECT Cosmos SDK transactions
Author: ShapeShift DAO
Latest version: 0.7.1-alpha.4

# proto-tx-builder

Constructs and signs protobuf encoded cosmos-sdk

## Getting started

```bash
# Clone submodules
git submodule update --init --recursive
# Install the required dependencies
yarn
```

## Testing

Bug fixes and features should always come with tests, when applicable. Test files should live next to the file they are testing. Before submitting your changes in a pull request, always run the full test suite.

To run the test suite:

```bash
# build all dependent packages
yarn build

# Runs the full test suite
yarn test
```

## TS Proto generation

cosmos-sdk uses [protocol buffers](https://developers.google.com/protocol-buffers) to encode txs and other communication between nodes and clients as well as other nodes. proto-tx-builder leverages the protobuf definitions to generate the TypeScript implementation of the custom protobufs required to interact with a given chain.

-   place .proto files for the cosmos-sdk chain in `./proto` and `./third_party/proto` directories
-   remove existing generated files:
    ```bash
    rm -rf ./proto/generated/*
    ```
-   execute the generation script:
    ```base
    ./gen.sh
    ```
-   commit the generated content along with your changes

## Contributing

Please see the [Contributing Guidelines](CONTRIBUTING.md) document for this repo's specific contributing guidelines.
npm package: @pastak/esbuild-jest
Description: Jest plugin to use esbuild for transformation
Author: Arjay Elbore
Latest version: 0.6.1

# esbuild-jest

### A Jest transformer using esbuild
With this transformer you can use and transform (ts, js, tsx and jsx) files

[![npm](https://img.shields.io/npm/v/esbuild-jest.svg)](https://www.npmjs.com/package/esbuild-jest)
![build status](https://github.com/aelbore/esbuild-jest/actions/workflows/ci.yml/badge.svg)

## Install

```bash
npm install --save-dev esbuild-jest esbuild
```

#### Setting up Jest config file

esbuild-jest transformer should be used in your Jest config file like this:

```js
{
  "transform": {
    "^.+\\.tsx?$": "esbuild-jest"
  }
}
```

#### Setting up Jest config file with transformOptions
```typescript
export interface Options {
  jsxFactory?: string
  jsxFragment?: string
  sourcemap?: boolean | 'inline' | 'external'
  loaders?: {
    [ext: string]: Loader
  },
  target?: string
  format?: string
}
```

```js
{
  "transform": {
    "^.+\\.tsx?$": [ 
      "esbuild-jest", 
      { 
        sourcemap: true,
        loaders: {
          '.spec.ts': 'tsx'
        }
      } 
    ]
  }
}
```

> Note: if you are using tsconfig.json and jsconfig.json with "paths", Please look `alias-hq` and there documentation https://github.com/davestewart/alias-hq/blob/master/docs/integrations.md
npm package: @pastalacabra/schematics
Description: Pastalacabra schematics collection
Author: Gonzalo Zas
Latest version: 1.6.0

# Getting Started With Schematics

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.

### Testing

To test locally, install `@angular-devkit/schematics-cli` globally and use the `schematics` command line tool. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode.

Check the documentation with

```bash
schematics --help
```

### Unit Testing

`npm run test` will run the unit tests, using Jasmine as a runner and test framework.

### Publishing

To publish, simply do:

```bash
npm run build
npm publish
```

That's it!
npm package: @pastel-framework/core
Description: Pastel is a lightweight and simple frontend framework for building web applications.
Author: Will Ballantine
Latest version: 1.0.0

# Pastel

## A simple way to create frontend SPA's in native JavaScript

### Features

- Simple and easy to use
- Barely any dependencies (only one!)
- No need to use a bundler, you can just include the script in your HTML
- Integrates with vite (coming soon)
- Builtin SPA router
- Easy state management
- Full control over the head tag, and rendering of the components
- Unique Pipeline system for applying transformations to components
### Installation

```bash
npm i pastel
```

### Pipelines
Pipelines are a powerful way to transform all components, with support for whitelists, blacklists, and ignored components.
```javascript
import { Pipeline } from 'pastel';
const pipeline = new Pipeline([
  {
    modifier: 'attributes',
    function: (attributes: any) => {
      attributes['class'] = 'text-6xl'
      return attributes
    },
    whitelist: [
      "p"
    ]
  },
  {
    modifier: 'text',
    function: (text: string) => {
      return text.replace('Hello', 'Hi')
    },
  },
  {
    modifier: 'style',
    function: (style: any) => {
      style['font-size'] = '2rem!important'
      return style
    },
    whitelist: [
      'input'
    ]
  }
])
pipeline.mount();

// You can also unmount like this: pipeline.unmount()
```
And that's it!
All you have to do is call pipeline.mount() and it will be applied to any renders/re-renders
### Example

```javascript
import { Div, Paragraph, Router, Head } from 'pastel'

const app = new Div().withChildren(new Paragraph().withText('Hello World!'))

const head = new Head().withTitle('Hello World!')

const router = new Router(
  {
    '/': app,
  },
  head,
)
router.listen()
```


_\*Pastel is still under development and is not yet ready for production use._
npm package: @pastelmind/vhtml-types
Description: TypeScript type definitions for vhtml
Author: pastelmind
Latest version: 0.1.0
Deprecated: @types/vhtml is now available, please use it instead.

# vhtml-types

This project provides TypeScript type definitions (`.d.ts`) for [vhtml](https://github.com/developit/vhtml). It generates type definitions for JSX by extracting and transforming interfaces from [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts).

## Installation and Usage

NOTE: This type definition has been submitted to [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50147) and is awaiting approval. The following instructions are meant to be a temporary measure.

First, install vhtml and vhtml-types.

```
npm install -D vhtml @pastelmind/vhtml-types
```

Next, add the following line to your `tsconfig.json`:

```jsonc
{
  "compilerOptions": {
    "paths": {
      // Add this
      "vhtml": ["./node_modules/@pastelmind/vhtml-types"]
    }
  }
}
```

This allows you to use vhtml and enjoy the benefits of type-checking your JSX expressions.

Note: This type definition may clash with other libraries and frameworks that bring their own JSX type definitions, e.g. React. I have not tested what happens when both vhtml and React is use together. Use with caution!

## Building

First, install the necessary packages:

```
npm install
```

Then generate the type definitions for vhtml:

```
npm run build
```

Finally, test the generated type definitions:

```
npm run test
```
npm package: @pastelsky/gatsby-plugin-disqus
Description: A component for integrating Disqus comments in Gatsby.
Author: Brett Stevenson
Latest version: 1.1.0

# Gatsby Plugin Disqus  

A plugin that simplifies the process of integrating [Disqus](https://disqus.com/) comments within your [Gatsby](https://www.gatsbyjs.org/) website.

## Install
`$ yarn add gatsby-plugin-disqus`  
or  
`$ npm install -S gatsby-plugin-disqus`  

## Configure

Add the plugin to your `gatsby-config.js` file with your [Disqus shortname](https://help.disqus.com/installation/whats-a-shortname)

```js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-disqus`,
      options: {
        shortname: `your-disqus-shortname`
      }
    },
  ]
}
```

## Usage

The plugin can be used as shown in this brief example:

```js
import Disqus from 'gatsby-plugin-disqus'

const PostTemplate = () => (
  <>
    /* Page Contents */
    <Disqus 
      identifier={post.id}
      title={post.title}
      url={`${config.siteUrl}${location.pathname}`}
    />
  </>
)

export default PostTemplate
```

While providing an `identifier`, `title`, and `url` are optional, it is recommended as it will ensure that threads won't be lost in the case that the post is renamed or the domain changes.

## How to contribute

If you have unanswered questions, would like help with enhancing or debugging the plugin, feel free create an [issue](https://github.com/tterb/gatsby-plugin-disqus/issues/new) or submit a [pull request](https://github.com/tterb/gatsby-plugin-disqus/pulls)
npm package: @pastelsky/gatsby-remark-code-titles
Description: Adds a code title to code snippets
Author: Dustin Schau
Latest version: 1.1.0

# gatsby-remark-code-titles

Adds a code title to code snippets

![Code title example](./example/code-title.png)

## Install

```bash
npm install gatsby-remark-code-titles --save-dev
```

## How to use

in your gatsby-config.js

```js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-code-titles',
          options: {
            className: 'your-custom-class-name'
          }
        } // IMPORTANT: this must be ahead of other plugins that use code blocks
      ]
    }
  }
]
```

### Include CSS

Now that we've injected the custom title, we need to style it! This presumes standard Gatsby prism highlighting, but tweak to your heart's content.

```css
.gatsby-remark-code-title {
  margin-bottom: -0.6rem;
  padding: 0.5em 1em;
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

  background-color: black;
  color: white;
  z-index: 0;

  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}
```

### Usage in Markdown

in your Markdown content

``````
```js:title=example-file.js
alert('how cool is this!');
```js
``````

This plugin will parse the Markdown AST, pluck the title, and then "clean" the code snippet language for further processing. In other words, the plugin will create the following structure, injecting a custom `div` with the title:

``````
<div class="gatsby-code-title">example-file.js</div>
```js
alert('how cool is this');
```
``````