open-index/open-npm huggingface dataset:
npm package: @prorenata/eslint-config-vue
Description: ProReNata's Vue JS ESLint config.
Author: Graham Fairweather
Latest version: 1.15.7

<a name="ProReNata/eslint-config-vue"></a>

## ProReNata/eslint-config-vue
<a href="https://travis-ci.org/ProReNata/eslint-config-vue"
title="Travis status">
<img
src="https://travis-ci.org/ProReNata/eslint-config-vue.svg?branch=master"
alt="Travis status" height="18">
</a>
<a href="https://david-dm.org/ProReNata/eslint-config-vue"
title="Dependency status">
<img src="https://david-dm.org/ProReNata/eslint-config-vue/status.svg"
alt="Dependency status" height="18"/>
</a>
<a
href="https://david-dm.org/ProReNata/eslint-config-vue?type=dev"
title="devDependency status">
<img src="https://david-dm.org/ProReNata/eslint-config-vue/dev-status.svg"
alt="devDependency status" height="18"/>
</a>
<a href="https://badge.fury.io/js/%40prorenata%2Feslint-config-vue" title="npm version">
<img src="https://badge.fury.io/js/%40prorenata%2Feslint-config-vue.svg"
alt="npm version" height="18">
</a>
<a
  href="https://bettercodehub.com/results/ProReNata/eslint-config-vue"
  title="bettercodehub score">
<img src="https://bettercodehub.com/edge/badge/ProReNata/eslint-config-vue?branch=master"
  alt="bettercodehub score" height="18">
</a>

ProReNata shareable `eslint` config for vue modules.

## Usage
See http://eslint.org/docs/developer-guide/shareable-configs

## Tests
Simply clone the repo, `npm install`, and run `npm test`
npm package: @proresult/php-typescript-rpc
Description: Client code to use with the php-typescript-rpc way of doing rpc requests to php. Currently at beta quality level.
Author: jostein@proresult.no
Latest version: 0.9.1

Proresult PHP Typescript RPC
============================

This is helper code used client side as a typescript library when using the Proresult PHP Typescript RPC code generator.

Should be considered beta level at the moment.

Created by Proresult AS (https://www.proresult.no)
npm package: @prosa-ai/conversa-react-native-web-view-widget
Description: Conversa React Native integration using Web View
Author: De Gitgit Agitya
Latest version: 1.1.1

# Conversa React Native Web View Widget

## Description

Conversa React Native Web View Widget is a React Native component that allows you to integrate web views widget into your React Native application with ease.

## Features

- Seamlessly integrate web views into your React Native application.
- Customize the behavior and appearance of the web views.
- Pass props and data to the web view as needed.

## Installation

```sh
npm install @prosa-ai/conversa-react-native-web-view-widget
```

## Usage

```js
import * as React from 'react';
import ConversaWebViewWidget from '@prosa-ai/conversa-react-native-web-view-widget';

export default function App() {
  const handleClose = React.useCallback(() => {
    console.log('handle close');
  }, []);

  const handleFinishScenario = React.useCallback((value) => {
    if (value) {
      console.log('scenario is finished');
    }
  }, []);

  return (
    <>
      <ConversaWebViewWidget
        uri="https://example.com"
        handleClose={handleClose}
        handleFinishScenario={handleFinishScenario}
      />
    </>
  );
}
```

## Props

**`uri`** _(string, required)_: The URL of the web page you want to display in the web view.
**`handleClose`** _(function, required)_: A callback function to be called when the web view is closed.
**`handleFinishScenario`** _(function, required)_: A callback function to be called when the scenario is finished.
**`statusBarProps`** _(object, optional)_: Props to be passed to the React Native StatusBar component.

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @prosa-ai/ui-components
Description: UI Component Library for Prosa.ai products
Author: Prosa.ai
Latest version: 2.0.2

# Prosa UI Components Library

Welcome to the Prosa UI Components Library, a comprehensive collection of UI components meticulously crafted to elevate the user experience across Prosa.ai products.

## How to Run

Development

- `npm install`
- `npm run dev`

Preview

- `npm install`
- `npm run storybook`

## Technologies We Use

Our library is built using cutting-edge technologies to ensure top-notch performance and maintainability:

- React: The foundation of our components, providing a robust and efficient user interface.
- Typescript: Ensuring code correctness, enhancing development productivity, and enabling better collaboration.
- Vite: Our build tool of choice for fast and optimized development.
- Storybook: A powerful tool for developing and showcasing our components in isolation.

## Documentation

Detailed documentation and examples are available in our [online documentation](https://prosa.ai/). We've designed the documentation to make it easy for you to explore, understand, and implement our UI components seamlessly.

Developed by [Prosa.ai](https://prosa.ai/)

Contributors [De Gitgit Agitya](https://github.com/degitgitagitya)
npm package: @prosazhin/pbstyles
Description: Basic styles for quick prototyping
Author: Evgenii Sazhin
Latest version: 1.0.0

# pbstyles

[Figma community](https://www.figma.com/community/file/1213609862805339771/pbstyles) | [Behance](https://www.behance.net/gallery/162935391/pbstyles)

## prosazhin basic styles

Basic styles for quick prototyping. Includes typography, semantic colors, color palette, basic sizes, containers and columns, breakpoints, border sizes, rounding, opacity, and shadows.

For generating styles, design tokens are used based on the [Style Dictionary](https://github.com/amzn/style-dictionary) package documentation, but extended with mixins thanks to the [Mixin Dictionary](https://github.com/prosazhin/mixin-dictionary) package. For generating a Tailwind Theme, the [Tailwind Dictionary](https://github.com/prosazhin/tailwind-dictionary) package is used.

## Installation

```bash
yarn add @prosazhin/pbstyles
# or
npm install @prosazhin/pbstyles
```

## Includes

### Basic variables

| Category              | CSS | LESS | SCSS | Tailwind Theme |
| :-------------------- | :-- | :--- | :--- | :------------- |
| Typography            | +   | +    | +    | +              |
| Semantic colors       | +   | +    | +    | +              |
| Colors palette        | +   | +    | +    | +              |
| Basic sizes           | +   | +    | +    | +              |
| Containers sizes      | +   | +    | +    | +              |
| Columns               | +   | +    | +    | -              |
| Border sizes          | +   | +    | +    | +              |
| Border rounding sizes | +   | +    | +    | +              |
| Opacity               | +   | +    | +    | +              |
| Shadows               | +   | +    | +    | +              |

### Mixins

| Mixin       | CSS | LESS | SCSS | Tailwind Theme |
| :---------- | :-- | :--- | :--- | :------------- |
| Animation   | -   | +    | +    | +              |
| Typography  | -   | +    | +    | +              |
| Breakpoints | -   | +    | +    | +              |

## Usage examples

### CSS Variables

Package contains only a [basic set of variables](https://github.com/prosazhin/pbstyles/blob/main/styles/css/index.css).
At the moment, CSS does not yet have the ability to use mixins.

```css
@import '@prosazhin/pbstyles/styles/css';
```

### LESS

Package contains [basic set of LESS variables and mixins](https://github.com/prosazhin/pbstyles/blob/main/styles/less/index.less).

```less
@import '@prosazhin/pbstyles/styles/less';
```

### SCSS

Package contains [basic set of SCSS variables and mixins](https://github.com/prosazhin/pbstyles/blob/main/styles/scss/index.scss).

```scss
@import '@prosazhin/pbstyles/styles/scss';
```

### Tailwind Theme version 4

Package contains [Tailwind Theme](https://github.com/prosazhin/pbstyles/blob/main/styles/tailwind/theme.css).

```css
@import 'tailwindcss';
@import '@prosazhin/pbstyles/styles/tailwind/theme.css';
```
npm package: @proscenium/component-manager
Description: Dynamic React component islands
Author: Joel Moss
Latest version: 0.4.2

# Proscenium / Component Manager

> Lazy load islands of React components.

## Install

`npm add @proscenium/component-manager` or

`yarn add @proscenium/component-manager` or

`pnpm add @proscenium/component-manager`

## Usage

**NOTE: `component-manager` is designed to be used with [proscenium](https://github.com/joelmoss/proscenium)**

Wherever you want to render a component, simply create an HTML element with the class
`componentManagedByProscenium`, and a `data-component` attribute. The `init()` function will then
find these elements you created, and will lazily load and render the matching component in their
place.

The `data-component` attribute should be a stringified JSON object and defines where the component
module should be imported from, the props it should be given, and any other options.

```json
{
  "path": "my/component",
  "props": {
    "name": "Joel"
  },
  "lazy": true // default
}
```

At a minimum, the `path` to the component should be given, and will be used to import the component.

By default, components are only loaded and rendered when coming into view using the browser's
`IntersectionObserver`. You can disable this and render a component immediately by passing
`lazy: false`.

## Example

```html
<div
  class="componentManagedByProscenium"
  data-component="{\"path\":\"my/component\",\"lazy\":true,\"props\":{\"name\":\"Joel\"}}">
  loading...
</div>
```

```js
import init from '@proscenium/component-manager'

init({
  // Wrap all components with this component.
  //
  // If a String, it should be a path to a module that will be dynamically imported and wrapped with
  // React's `lazy` helper. If a function, that function should return a dynamic `import()` of the
  // component you want to wrap with. If a promise, it should be the result of a dynamic `import()`.
  wrapWithComponent: '/my/application/component.jsx',

  // Wrap each components with this component.
  //
  // If a String, it should be a path to a module that will be dynamically imported and wrapped with
  // React's `lazy` helper. If a function, that function should return a dynamic `import()` of the
  // component you want to wrap with. If a promise, it should be the result of a dynamic `import()`.
  wrapEachWithComponent: '/my/each/component.jsx',

  // The Node selector to use for querying for components.
  selector: '.componentManagedByProscenium',

  // A function that accepts the component path, and should return a new path. This allows you to
  // rewrite the import path to your components.
  //
  // Example
  //  my/component -> /components/my/component.jsx
  buildComponentPath(component) {
    return `/components/${component}.jsx`
  },

  debug: false
})
```
npm package: @proscom/csv-to-xlsx
Description: Converts csv files to xlsx
Latest version: 1.0.1

# csv-to-xlsx

CLI tool to convert csv files to xlsx.

It uses [csv-parse](https://www.npmjs.com/package/csv-parse) and 
[xlsx](https://www.npmjs.com/package/xlsx) under the hood.

Usage:

```bash
$ csv-to-xlsx \
    -i File.csv \
    -o File.xlsx \
    -d "," \
    -e "\"
```
```bash
$ csv-to-xlsx --help
Options:
  --help           Show help                                           [boolean]
  --version        Show version number                                 [boolean]
  --input, -i      Input file                                [string] [required]
  --output, -o     Output file                               [string] [required]
  --delimiter, -d  CSV delimiter character               [string] [default: ","]
  --quote, -q      CSV quote character                   [string] [default: """]
  --escape, -e     CSV escape character                  [string] [default: "\"]
  --trim, -t       Trim whitespaces around delimiter  [boolean] [default: false]
  --sheet, -s      XLSX sheet name                  [string] [default: "import"]
```
npm package: @proscom/react-double-scrollbar
Description: Fork of react-double-scrollbar with sourcemaps removed
Author: Scott McDaniel, Andrew Starostin
Latest version: 0.0.17

React-Double Scrollbar
======================

This is a fork of [https://github.com/umchee/react-double-scrollbar]()
because original package has link to the sourcemap, but it does not exist.

Adds a horizontal scrollbar to the top of an element.

## Usage
Example in a React.Component render method:

```javascript
render() {
    return (
      <div>
        <DoubleScrollbar>
          <table>...</table>
        </DoubleScrollbar>
      </div>
    );
  }
```

## Installation

The easiest way to use React-Double Scrollbar is to install it from NPM and include it in your own build.

```javascript
npm install react-double-scrollbar --save
```

You can also use the standalone build by including `dist/DoubleScrollbar.js` in your page.

# License

MIT

# Change log
v0.0.15
- Recalculate the width of the children in componentDidUpdate and if the width has changed update the width of the top scrollbar div.

v0.0.11
- Add onresize to update the scrollbar when the window size changes

v0.0.10
- Dependency fix, added peerDependency and allow for react 0.14.7 or newer

v0.0.9
- Added tests and documentation

# Contributing

All help is appreciated. To contribute please create a branch, make changes, add or update tests then create a pull request.

# Development

Clone repo then run

`npm install`

To build run

`npm run build`

To test

`npm test`

Test in watch mode

`npm test -- --watch`

# To create and publish a new version

Make sure to update version in package.json

To create a new tag run

`git tag <new version>`

`git push origin --tags`

To publish to npm

`npm publish`
npm package: @proscom/social-links
Description: Validate & sanitize social links
Author: Grzegorz Kucmierz
Latest version: 1.4.3

This repository is a fork of [Social Links](https://github.com/gkucmierz/social-links) which adds vk and telegram profiles.

Description below is an original README.md.

---


![minified size](https://badgen.net/bundlephobia/min/social-links) ![minified zipped size](https://badgen.net/bundlephobia/minzip/social-links) ![types](https://badgen.net/npm/types/social-links) ![license](https://badgen.net/npm/license/social-links)

# Social Links

Social Links is helping to validate and sanitize social (desktop & mobile) links

### Install
```bash
npm i social-links --save
```

### Demo

https://awesome-web-tools.web.app/social-links - Example use case

### Using
```js
import { SocialLinks, TYPE_MOBILE } from 'social-links';
const socialLinks = new SocialLinks();

const link = 'http://www.linkedin.com/in/gkucmierz';
console.log(socialLinks.isValid('linkedin', link)); // true

console.log(socialLinks.sanitize('linkedin', link)); // 'https://linkedin.com/in/gkucmierz'

console.log(socialLinks.sanitize('linkedin', link, TYPE_MOBILE)); // 'https://linkedin.com/mwlite/in/gkucmierz'
```

Above examples works based on predefined **linkedin** profile:
```js
import { Profile } from 'social-links';
const linkedinProfile: Profile =
{ name: 'linkedin',
    matches: [
      {
        match: '(https?://)?(www.)?linkedin.com/in/({PROFILE_ID})', group: 3, type: TYPE_DESKTOP,
        pattern: 'https://linkedin.com/in/{PROFILE_ID}'
      },
      {
        match: '(https?://)?(www.)?linkedin.com/mwlite/in/({PROFILE_ID})', group: 3, type: TYPE_MOBILE,
        pattern: 'https://linkedin.com/mwlite/in/{PROFILE_ID}'
      },
      { match: '({PROFILE_ID})', group: 1 },
    ]
};
```

### Add new profile
```js
import { SocialLinks, Profile } from 'social-links';

const socialLinks = new SocialLinks();
const profileMatches: ProfileMatch[] = [ ... ];

socialLinks.addProfile('profileName', profileMatches);
```

### Configuration
```js
import { SocialLinks, Config } from 'social-links';

const config: Config = {
  usePredefinedProfiles: true,
  trimInput: true,
  allowQueryParams: false,
};
const socialLinks = new SocialLinks(config);
```

### Build

Watch, *tsc* build
```bash
npm run start
```

### Tests

Just *jest* tests
```bash
npm run test
```
or
```bash
npm run test:watch
```

### Contributing

[CONTRIBUTING.md](CONTRIBUTING.md)
npm package: @proscom/xlsx-to-database
Description: Imports sheets from xlsx file to the database tables
Latest version: 1.0.2

# xlsx-to-database

Cli tool to import sheets from xlsx file to the database tables

Currently supports only PostgreSQL databases via [pg](https://www.npmjs.com/package/pg).
Uses [pg-copy-streams](https://www.npmjs.com/package/pg-copy-streams) for faster inserts. 
Uses [xlsx](https://www.npmjs.com/package/xlsx) to parse xlsx files.

### Installation:

```bash
npm install -g @proscom/xlsx-to-database
```

### Usage:
```bash
$ xlsx-to-database \
    -i input.xlsx \
    -d database.json \
    -c
```

```bash
$ xlsx-to-database --help
Options:
  --help          Show help                                            [boolean]
  --version       Show version number                                  [boolean]
  --input, -i     Input xlsx file                            [string] [required]
  --database, -d  Path to database connection configuration file
                                                             [string] [required]
  --tables, -t    Only import specified sheets                           [array]
  --prefix, -p    Prefix is prepended to the sheet name to get table name
                                                          [string] [default: ""]
  --batchSize     Amount of rows per single insert query[number] [default: 1000]
  --drop          Drops and recreates matched tables  [boolean] [default: false]
  --create, -c    Creates tables                      [boolean] [default: false]
```

### Configuration file example for PostgreSQL:
```json
{
  "adapter": "pgsql",
  "host": "127.0.0.1",
  "port": "5432",
  "username": "root",
  "password": "root",
  "database": "test",
  "schema": "test"
}
```

Configuration file is read via `require()`, so you can also use a `.js` file to dynamically generate a configuration.
It may be useful in order to read environment variables for example.
npm package: @prose-motions/core
Description: Drop-in Vim-style motions for Tiptap / ProseMirror editors
Author: Stratum Labs
Latest version: 0.1.7

<h1 align="center"> Prose Motions </h1>

`@prose-motions/core` is a lightweight extension that brings Vim's **Normal / Insert** modes and an ever-growing collection of native keybindings to any [Tiptap (v2)](https://tiptap.dev) or [ProseMirror editor](https://prosemirror.net).

## Installation

```bash
bun add @prose-motions/core  # or npm/yarn/pnpm
```

## Usage (Tiptap React example)

```tsx
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import { VimMode } from '@prose-motions/core'

function MyEditor () {
  const editor = useEditor({
    extensions: [StarterKit, VimMode],
    content: '<p>hello world</p>'
  })

  return <EditorContent editor={editor} />
}
```

## Usage (ProseMirror React example)

```tsx
import { useState } from 'react'
import {
	ProseMirror,
	ProseMirrorDoc,
	reactKeys,
} from '@handlewithcare/react-prosemirror'
import { EditorState } from 'prosemirror-state'
import { schema } from 'prosemirror-schema-basic'
import { VimMode } from '@prose-motions/core'

export default function MyProseMirror () {
    return (
        <ProseMirror
            defaultState={EditorState.create({
                schema,
                plugins: [
                // The reactKeys plugin is required for the ProseMirror component to work!
                reactKeys(),
                ...VimMode.addProseMirrorPlugins()
                ],
            })}
        >
            <ProseMirrorDoc />
        </ProseMirror>
  );
}
```

> This snippet uses the modern "React × ProseMirror" bridge maintained by Handle with Care ([handlewithcarecollective/react-prosemirror](https://github.com/handlewithcarecollective/react-prosemirror)). It automatically handles state-tearing issues by updating the `EditorView` inside a layout effect
npm package: @prose-ui/core
Description: Remark plugins and utilities for transforming Markdown and MDX content with Prose UI.
Latest version: 2.0.8

# @prose-ui/core

Remark plugins and utilities for transforming Markdown and MDX content with Prose UI.

## Installation

```bash
npm install @prose-ui/core
```

## Usage

The `remarkPlugins()` function provides plugins for syntax-highlighted code blocks, LaTeX math formulas, and component transformations:

```typescript
import { remarkPlugins } from '@prose-ui/core'

const plugins = remarkPlugins({
  image: {
    imageDir: './public',
  },
})

// Pass plugins to your MDX processor
const content = await compileMDX(post, {
  remarkPlugins: plugins,
})
```

### What's included

- Syntax-highlighted code blocks via Shiki
- LaTeX math formulas via KaTeX
- Image processing and metadata extraction
- Link and heading transformations

## About Prose UI

[Prose UI](https://prose-ui.com) is an open-source library of React components and customizable CSS styles for rendering Markdown and MDX content. It provides polished typography and components for documentation sites, blogs, and content-focused applications.

- [Documentation](https://prose-ui.com/docs)
- [GitHub](https://github.com/vrepsys/prose-ui)

## Dhub

Looking for a visual editing experience? [Dhub](https://dhub.dev) is a git-based CMS for technical documentation with Notion-like Markdown editing. It commits directly to GitHub—no lock-in.

## License

MIT
npm package: @prose-ui/next
Description: React components for rendering Markdown and MDX content with Prose UI, optimized for Next.js. Uses `next/link` and `next/image` for better performance.
Latest version: 2.0.8

# @prose-ui/next

React components for rendering Markdown and MDX content with Prose UI, optimized for Next.js. Uses `next/link` and `next/image` for better performance.

For non-Next.js React projects, use [`@prose-ui/react`](https://www.npmjs.com/package/@prose-ui/react) instead.

## Installation

```bash
npm install @prose-ui/next @prose-ui/style
```

## Usage

Pass the MDX components to your renderer and wrap content with the `prose-ui` class:

```tsx
import { mdxComponents } from '@prose-ui/next'
import '@prose-ui/style/prose-ui.css'

// Pass components to your MDX renderer
<MDXContent components={mdxComponents} />

// Wrap content with the prose-ui class
<div className="prose-ui">
  {/* Your rendered Markdown content */}
</div>
```

For math formulas, also import the KaTeX styles:

```css
@import '@prose-ui/style/katex.css';
```

### Available components

Import individual components as needed:

```typescript
import {
  Callout,
  CodeBlock,
  Frame,
  Heading,
  Image,
  Link,
  InlineMath,
  BlockMath,
  // ...
} from '@prose-ui/next'
```

## About Prose UI

[Prose UI](https://prose-ui.com) is an open-source library of React components and customizable CSS styles for rendering Markdown and MDX content. It provides polished typography and components for documentation sites, blogs, and content-focused applications.

- [Documentation](https://prose-ui.com/docs)
- [GitHub](https://github.com/vrepsys/prose-ui)

## Dhub

Looking for a visual editing experience? [Dhub](https://dhub.dev) is a git-based CMS for technical documentation with Notion-like Markdown editing. It commits directly to GitHub—no lock-in.

## License

MIT
npm package: @prose-ui/react
Description: React components for rendering Markdown and MDX content with Prose UI. Works with any React runtime.
Latest version: 2.0.8

# @prose-ui/react

React components for rendering Markdown and MDX content with Prose UI. Works with any React runtime.

For Next.js projects, use [`@prose-ui/next`](https://www.npmjs.com/package/@prose-ui/next) instead for optimized `next/link` and `next/image` integration.

## Installation

```bash
npm install @prose-ui/react @prose-ui/style
```

## Usage

Pass the MDX components to your renderer and wrap content with the `prose-ui` class:

```tsx
import { mdxComponents } from '@prose-ui/react'
import '@prose-ui/style/prose-ui.css'

// Pass components to your MDX renderer
<MDXContent components={mdxComponents} />

// Wrap content with the prose-ui class
<div className="prose-ui">
  {/* Your rendered Markdown content */}
</div>
```

For math formulas, also import the KaTeX styles:

```css
@import '@prose-ui/style/katex.css';
```

### Available components

Import individual components as needed:

```typescript
import {
  Callout,
  CodeBlock,
  Frame,
  Heading,
  Image,
  Link,
  InlineMath,
  BlockMath,
  // ...
} from '@prose-ui/react'
```

## About Prose UI

[Prose UI](https://prose-ui.com) is an open-source library of React components and customizable CSS styles for rendering Markdown and MDX content. It provides polished typography and components for documentation sites, blogs, and content-focused applications.

- [Documentation](https://prose-ui.com/docs)
- [GitHub](https://github.com/vrepsys/prose-ui)

## Dhub

Looking for a visual editing experience? [Dhub](https://dhub.dev) is a git-based CMS for technical documentation with Notion-like Markdown editing. It commits directly to GitHub—no lock-in.

## License

MIT
npm package: @prose-ui/style
Description: CSS styles and design tokens for Prose UI. Provides typography, component styles, and dark mode support for Markdown and MDX content.
Latest version: 2.0.8

# @prose-ui/style

CSS styles and design tokens for Prose UI. Provides typography, component styles, and dark mode support for Markdown and MDX content.

## Installation

```bash
npm install @prose-ui/style
```

## Usage

Import the styles in your global stylesheet:

```css
@import '@prose-ui/style/prose-ui.css';
```

For math formulas, also import KaTeX styles:

```css
@import '@prose-ui/style/katex.css';
```

Then wrap your content with the `prose-ui` class:

```tsx
<div className="prose-ui">
  {/* Your rendered Markdown content */}
</div>
```

### Dark mode

Prose UI uses the `dark` class on the `<html>` element to switch to dark mode, compatible with most theme toggles.

### Customization

Override CSS variables to customize the design:

```css
:root {
  --p-font-family: var(--font-geist-sans);
  --p-font-family-mono: var(--font-geist-mono);
  --p-color-text-accent: oklch(0.54 0.22 143.88);
}
```

See the [styling documentation](https://prose-ui.com/docs/styling) for all available variables.

## About Prose UI

[Prose UI](https://prose-ui.com) is an open-source library of React components and customizable CSS styles for rendering Markdown and MDX content. It provides polished typography and components for documentation sites, blogs, and content-focused applications.

- [Documentation](https://prose-ui.com/docs)
- [GitHub](https://github.com/vrepsys/prose-ui)

## Dhub

Looking for a visual editing experience? [Dhub](https://dhub.dev) is a git-based CMS for technical documentation with Notion-like Markdown editing. It commits directly to GitHub—no lock-in.

## License

MIT
npm package: @prosekit/pm
Description: A re-export of ProseMirror packages
Author: ocavue
Latest version: 0.1.15

# @prosekit/pm

This package provides a convenient way to install all the core ProseMirror packages at once. It simply re-exports the following packages:

| Entry points              | Package                                                                          |
| ------------------------- | -------------------------------------------------------------------------------- |
| `@prosekit/pm/model`      | [`prosemirror-model`](https://www.npmjs.com/package/prosemirror-model)           |
| `@prosekit/pm/state`      | [`prosemirror-state`](https://www.npmjs.com/package/prosemirror-state)           |
| `@prosekit/pm/view`       | [`prosemirror-view`](https://www.npmjs.com/package/prosemirror-view)             |
| `@prosekit/pm/transform`  | [`prosemirror-transform`](https://www.npmjs.com/package/prosemirror-transform)   |
| `@prosekit/pm/commands`   | [`prosemirror-commands`](https://www.npmjs.com/package/prosemirror-commands)     |
| `@prosekit/pm/keymap`     | [`prosemirror-keymap`](https://www.npmjs.com/package/prosemirror-keymap)         |
| `@prosekit/pm/inputrules` | [`prosemirror-inputrules`](https://www.npmjs.com/package/prosemirror-inputrules) |

You can import the individual packages using the entry points listed above. For example, to import the `Schema` from `prosemirror-model` package, you can do:

```js
import { Schema } from '@prosekit/pm/model'
```
npm package: @prosellen/astro-navigation
Description: An Astro integration to create navigation trees.
Author: Peter Rosellen
Latest version: 0.7.0

# Custom navigation for Astro pages

This component helps you create a navigation tree structure based on an array of JSON objects you provide. This gives you full control and flexibility over what the tree looks like.

## Work In Progress

While this component mostly works, it is still in beta and should not be considered "production ready". Future version might include breaking changes.

I'm honestly just working on a solution to fit my very specific needs and mistakenly used the `astro-component` keyword ... which got it listed in the Astro Integration pages and gave this more attention than it deserves right now. But now that it's here, it might actually be of some use to other people as well.

## Basic usage

First install the module:

```js
npm install @prosellen/astro-navigation
```

Then inside of an `.astro` page, import the module, create an array of navigation objects, and pass it to the component inside of the body:

```js
---
import Navigation from '@prosellen/astro-navigation'

// Create an array with (nested) navigation objects
const navigationItems = [
  { url: "/", text: "Home" },
  {
    url: "/about-us/",
    text: "About Us",
    children: [
      {
        url: "/about-us/team/",
        text: "Team",
      },
    ],
  },
  { url: "/contact/", text: "Contact" },
]
---

<nav>
  <Navigation navigationItems={navigationItems} />
</nav>
```

This will render to something like this:

```html
<ul class="navigation-level-1">
  <li class="">
    <a href="/" class="">Home</a>
  </li>
  <li class="">
    <a href="/about-us/" class="">About Us</a>
    <ul class="navigation-level-2">
      <li class="">
        <a href="/about-us/team/" class="">Team</a>
      </li>
    </ul>
  </li>
  <li class="">
    <a href="/contact/" class="">Contact</a>
  </li>
</ul>
```

## Usage options

### Navigation Item array

```js
const navigationItems = [
  {
    text: "Home", // The text to display inside the `a` tag
    url: "/about-us/", // A unique URL to the page to be used as the `href` attribute
    redirect: "/about-us/team/", // (Optional) If set, this is used for the `href` attribute instead of the URL
    children: [{ ... }], // (Optional) An array of navigation items for nested navigation
  },
  ...
]
```

### Component

```js
<Navigation
  navigationItems=(navigationItems) // The array of navigation items
  startLevel=1; // Begin rendering the navigation at this level ss
  maxLevel=4; // Do not render nesting deeper than this level
/>
```

See the [demo pages](./demo/src/pages/) in the repository for usage examples