open-index/open-npm huggingface dataset:
npm package: @github-docs/data-directory
Description: Recursively load a directory of YAML, JSON, and Markdown files into a JavaScript object.
Latest version: 1.2.0

# data-directory

A Node.js module to recursively load a directory of YAML, JSON, and Markdown files into a JavaScript object.

## Installation

```
npm install @github-docs/data-directory
```

## Usage

Given the following file tree:

```
$ tree data
data
├── bar.yaml
├── foo.json
└── nested
    └── baz.md
```

and the following content in each file:

```
$ cat foo.json
{"meaningOfLife": 42}

$ cat bar.yaml
another_markup_language: 'yes'

$ cat nested/baz.md
I am markdown!
```

then running this code:

```js
const path = require('path')
const dataDirectory = require('@github-docs/data-directory')
const data = dataDirectory(path.join(__dirname, 'data'))
```

will return this object:

```js
{
  bar: { another_markup_language: 'yes' },
  foo: { meaningOfLife: 42 },
  nested: { baz: 'I am markdown!' }
}
```

## API

This module exports a single synchronous function `dataDirectory` that returns
an Object.

### `dataDirectory(directory, [options])`

- `directory` String (required) - Full path to the directory to read.
- `options` Object
  - `extensions` Array - A case-insensitive array of filenames to load. Defaults to `['.json', '.md', '.markdown', '.yaml', '.yml']`
  - `ignorePatterns` Array - Filename patterns to ignore. Every value in the array must be a regular expression. Defaults to `[/README\.md$/i]`. To include `README.md` files in your data object, specify an empty array: `[]`.
  - `preprocess` Function - A function that can be used to modify each loaded file's content before it's added to the data object. Default is a no-op function that return the unmodified content: `(content) => { return content }`
npm package: @github-docs/frontmatter
Description: Parse and validate YAML frontmatter
Latest version: 1.3.1

# @github-docs/frontmatter

> Parse and validate YAML frontmatter

This is a frontmatter parser built on [`gray-matter`](https://ghub.io/gray-matter) that supports optional frontmatter validation using a [revalidator](https://ghub.io/revalidator) JSON schema.

## Installation

This is a [Node.js](https://nodejs.org/) module available through the 
[npm registry](https://www.npmjs.com/).

```sh
npm install @github-docs/frontmatter
```

## Features

- Make frontmatter entries required or optional
- Validate value type, length, pattern, etc. See the [revalidator#schema](https://github.com/flatiron/revalidator#schema).
- Validate urls, emails, IP addresses, dates, times, etc. See [revalidator#format](https://github.com/flatiron/revalidator#format).
- Set an explicit list of allowable values with [`enum`](https://github.com/flatiron/revalidator#enum).
- Enforce a specific order of frontmatter values with `validateKeyOrder`
- Disallow values that are not specified in the schema with `validateKeyNames`

## Usage

```js
const frontmatter = require('@github-docs/frontmatter')

const schema = {
  properties: {
    title: {
      type: 'string',
      required: true
    },
    meaning_of_life: {
      type: 'number',
      minimum: 40,
      maximum: 50
    }
  }
}

const markdown = `---
title: Hello, World
meaning_of_life: 42
---

I am content.
`

const { data, content, errors } = frontmatter(markdown)
```

## API

### `frontmatter(markdown, [options])`

Parses a string containing markdown and (optional) frontmatter.

- `markdown` String (required) - the contents of a markdown file that includes YAML frontmatter.
- `options` Object (optional)
  - `schema` Object - A [revalidator](https://ghub.io/revalidator) JSON schema.
  - `filepath` String - The name of the file being parsed. Useful for debugging when errors occur.
  - `validateKeyNames` Boolean - If `true`, checks that all keys are specified as schema properties. Defaults to `false`
  - `validateKeyOrder` Boolean - If `true`, checks that all keys are in the same order they appear in the schema. Defaults to `false`


### `frontmatter.stringify(markdown, [data], [opts])`

This is the same [`stringify`](https://github.com/jonschlinkert/gray-matter#stringify) method exported by the `gray-matter` module, which can be used to join a markdown string and a frontmatter object together as a single string.

- `file` StringObject - The content string to append to stringified front-matter, or a file object with file.content string.
- `data` Object - Front matter to stringify.
- `options` Object - Options to pass to gray-matter and js-yaml.
- `returns` String - Returns a string created by wrapping stringified yaml with delimiters, and appending that to the given string.

## License

MIT
npm package: @github-docs/render-content
Description: Markdown and Liquid rendering pipeline
Latest version: 5.2.1

# @github-docs/render-content

Markdown and Liquid rendering pipeline for Node.js

## Usage

```js
const renderContent = require('@github-docs/render-content')

const html = await renderContent(`
# Beep
{{ foo }}
`, {
  foo: 'bar'
})
```

Creates:

```html
<h1 id="beep"><a href="#beep">Beep</a></h1>
<p>bar</p>
```

## Installation

```bash
$ npm install @github-docs/render-content
```

## API

### renderContent(markdown, context = {}, options = {})

Render a string of `markdown` with optional `context`. Returns a `Promise`.

Liquid will be looking for includes in `${process.cwd()}/includes`.

Options:

- `encodeEntities`: Encode html entities. Default: `false`.
- `fileName`: File name for debugging purposes.
- `textOnly`: Output text instead of html using [cheerio](https://ghub.io/cheerio).

### .liquid

The [Liquid](https://ghub.io/liquid) instance used internally.

### Code block headers

You can add a header to code blocks by adding the `{:copy}` annotation after the code fences:

    ```js{:copy}
    const copyMe = true
    ```

This renders:

![image](https://user-images.githubusercontent.com/10660468/95881747-e96c6900-0d46-11eb-9abf-1e8ad16c7646.png)

The un-highlighted text is available as `button.js-btn-copy`'s `data-clipboard-text` attribute.

## License

MIT
npm package: @github-graph/api
Description: API client for GitHub's GraphQL API that automatically merges multiple requests into one where possible, saving you from hitting the API rate limits.
Author: Forbes Lindesay
Latest version: 2.2.1

# @github-graph/api

API client for GitHub's GraphQL API that automatically merges multiple requests into one where possible, saving you from hitting the API rate limits.

## Installation

```
yarn add @github-graph/api
```

## Usage

```ts
import Client, {auth, gql, getMethod} from '@github-graph/api';

const getStargazers = getMethod<
  {repository: {nameWithOwner: string; stargazers: {totalCount: number}}},
  {owner: string; name: string}
>(gql`
  query GetStargazers($owner: String!, $name: String!) {
    repository(owner: $owner, name: $name) {
      nameWithOwner
      stargazers {
        totalCount
      }
    }
  }
`);


const getWatchers = getMethod<
  {repository: {nameWithOwner: string; watchers: {totalCount: number}}},
  {owner: string; name: string}
>(gql`
  query GetWatchers($owner: String!, $name: String!) {
    repository(owner: $owner, name: $name) {
      nameWithOwner
      watchers {
        totalCount
      }
    }
  }
`);

const client = new Client({
  auth: auth.createTokenAuth(GITHUB_TOKEN),
});

await Promise.all([
  getStargazers(client, {owner: 'pugjs', name: 'pug'}),
  getWatchers(client, {owner: 'pugjs', name: 'pug'})),
  getStargazers(client, {owner: 'ForbesLindesay', name: 'atdatabases'}),
  getWatchers(client, {owner: 'ForbesLindesay', name: 'atdatabases'}),
]);
```

Unlike other libraries, that would send 4 separate queries to the backend. This library will only send one:

```ts
{
  query: `
    query ($owner: String!, $name: String!, $b: String!, $c: String!) {
      repository(owner: $owner, name: $name) {
        nameWithOwner
        stargazers {
          totalCount
        }
        watchers {
          totalCount
        }
      }
      b: repository(owner: $b, name: $c) {
        nameWithOwner
        stargazers {
          totalCount
        }
        watchers {
          totalCount
        }
      }
    }
  `,
  variables: {
    b: 'ForbesLindesay',
    c: 'atdatabases',
    name: 'pug',
    owner: 'pugjs',
  },
}
```

This is 4 times fewer tokens used from your rate limit.

### REST API

Unfortunatley not everything on GitHub is available via the GraphQL API. If you need to, you can use `client.rest` which matches the [octokit/rest](https://octokit.github.io/rest.js/v17) API. or you can use `client.request` which lets you make direct un-typed requests to the GitHub API.

### Constructing from octokit

If you already have an octokit client, you can construct a github-graph client via:

```ts
const client = new Client({
  request: octokitClient.request,
});
```
npm package: @github-graph/cli
Description: Generate a strongly typed API for GitHub from a set of GraphQL Queries.
Author: Forbes Lindesay
Latest version: 1.1.0

# @github-graph/cli

Generate a strongly typed API for GitHub from a set of GraphQL Queries.

## Installation

```
yarn add @github-graph/cli
```

## Usage

api.graphql

```graphql
query GetLogin {
  viewer {
    login
  }
}

query GetStargazers($owner: String!, $name: String!) {
  repository(owner: $owner, name: $name) {
    nameWithOwner
    stargazers {
      totalCount
    }
  }
}

query GetWatchers($owner: String!, $name: String!) {
  repository(owner: $owner, name: $name) {
    nameWithOwner
    watchers {
      totalCount
    }
  }
}
```

Then build it with:

```
npx @github-graph/cli api.graphql
```

Then import:

```ts
import Client, {auth} from '@github-graph/api';
import {getStargazers, getWatchers} from './api';

const client = new Client({
  auth: auth.createTokenAuth(GITHUB_TOKEN),
});

await Promise.all([
  getStargazers(client, {owner: 'pugjs', name: 'pug'}),
  getWatchers(client, {owner: 'pugjs', name: 'pug'})),
  getStargazers(client, {owner: 'ForbesLindesay', name: 'atdatabases'}),
  getWatchers(client, {owner: 'ForbesLindesay', name: 'atdatabases'}),
]);
```
npm package: @github/arianotify-polyfill
Description: Polyfill for the ARIA Notification API
Author: GitHub Inc.
Latest version: 2.3.3

# arianotify-polyfill

Polyfill for the [ARIA Notification API](https://github.com/WICG/accessible-notifications/blob/main/README.md)

The goal of this library is to polyfill `ariaNotify` so that it can be used seamlessly across browsers that support the native functionality, and those that don't. This adds the `Element.prototype.ariaNotify` and/or `Document.prototype.ariaNotify` functions if they do not exist, emulating the native functionality.

This is used in production on github.com.

## Background 

In browsers where `ariaNotify` is supported it will emit a notification event. In browsers where it isn't supported this library will create a "fake" element that is an aria-live region, insert it into the DOM, and modify the text content of the element to place the given message in, achieving a similar effect to the native functionality.

## Requirements

This is only meant to be used in a browser context. It should not be used on the server. To install this you will likely need `npm`.

```sh
$ npm i @github/arianotify-polyfill
```

In your JavaScript you can introduce the polyfill using a "bare" import:

```js
import "@github/arianotify-polyfill"
```

Then continue to use `ariaNotify` as if it were supported everywhere. A small contrived example:

```js
button.ariaNotify("Saved")
```

## License 

This project is licensed under the terms of the MIT open source license. Please refer to [MIT](./LICENSE) for the full terms.

## Maintainers 

The @github/accessibility and @github/primer teams maintain this library.

## Support

This library is provided "as is". Please feel free to file issues; however, we offer no time frame for correspondence or resolution of any issues.

## Acknowledgement

Special thanks to Microsoft and the ARIA Working Group for making `ariaNotify` a possibility.
npm package: @github/axe-github
Description: Custom rules and configuration recommendations for the `axe-core` library for GitHub projects
Latest version: 0.8.1

# axe-github

Custom rules and configuration recommendations for the `axe-core` library for GitHub projects.

## Custom rules

These are the custom rules contained in this package:

- `aria-attribute-is-valid`
- `autofocus-in-dialog`
- `avoid-both-disabled-and-aria-disabled`
- `empty-summary`
- `menuitem-should-be-interactive`
- `nested-forms`
- `redundant-aria-label-aria-labelledby`
- `submit-reset-button-must-be-in-form`

## Configuration

We recommend running `axe-core` defaults.

## Basic usage

```JS
import 'axe-core'
import customRules from '@github/axe-github'

axe.configure(customRules)
axe.run(...)
```

### Playwright configuration

For the custom rules in this library, their associated check functions are not serializable to a [Playwright](https://playwright.dev/) page. To configure axe, you'll need to load and evaluate `configure-browser.ts` within the page context. Axe should be loaded on the page before configuring.

```JS
const configSrc = fs.readFileSync(
  require.resolve('@github/axe-github/configure-browser'),
  'utf8'
)

page.evaluate((configSrc) => {
  window.eval(configSrc)
}, configSrc)
```
npm package: @github/browserslist-config
Description: The GitHub browserslist config.
Author: GitHub Inc.
Latest version: 1.0.0

# browserslist-config

The GitHub browserslist config.

## How is this used on GitHub?

We use `browserslist` to power tools that guide developers to use APIs and syntax that is implemented by the [browsers we support](https://github.com/github/browser-support). These tools include [eslint-plugin-compat](https://github.com/amilajack/eslint-plugin-compat), [eslint-plugin-escompat](https://github.com/keithamus/eslint-plugin-escompat) and [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env).

## Usage

Install the package using `npm`.

```sh
npm install --save-dev @github/browserslist-config
```

Add the `browserslist` key to your `package.json`.

```diff
diff --git a/package.json b/package.json
index 2ecef3d..260838f 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "keywords": [
     "prettier"
   ],
+  "browserslist": "extends @github/browserslist-config",
   "license": "MIT",
   "author": "GitHub Inc.",
   "main": "index.js"
 ```
 
[Check out the `browserslist` documentation for more info on sharing configurations](https://github.com/browserslist/browserslist#shareable-configs).

## Contributing

Contributing should only be done by GitHub staff and PRs are approved by `@github/web-systems` as the CODEOWNERS of this library. GitHub Staff can use [github/browser-support-cli](https://github.com/github/browser-support-cli) to get production data on browser usage for github.com.

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/catalyst
Description: Helpers for creating HTML Elements as Controllers
Author: GitHub Inc.
Latest version: 1.8.0

# Catalyst

Catalyst is a set of patterns and techniques for developing components within a complex application. At its core, Catalyst simply provides a small library of functions to make developing [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) easier.

For more see the [Catalyst Website](https://github.github.io/catalyst/) which includes a [Guide To using Catalyst](https://github.github.io/catalyst/guide/introduction).
npm package: @github/cem-plugin-readme
Description: A Custom Element Manifest plugin to generate a README for a Web Component
Author: GitHub
Latest version: 0.0.1

# @github/cem-plugin-readme

A Custom Element Manifest Analyzer plugin that generates a README.md for a Web Component.

## Development

```bash
# install dependencies
npm install

# start local development
npm start

# run tests
npm test
```

> **TIP:** When writing custom plugins, [ASTExplorer](https://astexplorer.net/#/gist/f99a9fba2c21e015d0a8590d291523e5/cce02565e487b584c943d317241991f19b105f94) is your friend 🙂

## Usage

### Install:

```bash
npm install --save-dev @github/cem-plugin-readme
```

### Import

`custom-elements-manifest.config.js`:
```js
import {readme} from '@github/cem-plugin-readme';

export default {
  plugins: [
    readme()
  ]
}
```
npm package: @github/check-all
Description: Multiple checkbox selection helper.
Latest version: 0.4.0

# Check All

- Check/uncheck `[data-check-all]` to check/uncheck all checkboxes in a container.
- Shift click on `[data-check-all-item]` to select all checkboxes between the last checked checkbox and the target checkbox.
- Auto-update `[data-check-all-count]` to count of checked items.

## Installation

```
$ npm install @github/check-all
```

## Usage

### JS

```js
import checkAll from '@github/check-all'
checkAll(document.querySelector('[data-check-all-container]'))
```

Using a library like [selector-observer](https://github.com/josh/selector-observer), the behavior can automatically be applied to any container matching a selector.

```js
import {observe} from 'selector-observer'
import checkAll from '@github/check-all'

observe('[data-check-all-container]', { subscribe: checkAll })
```

### HTML

```html
<div data-check-all-container>
  Count: <span data-check-all-count>0</span>
  <label><input type="checkbox" data-check-all> Check All</label>
  <label><input type="checkbox" data-check-all-item> github/fetch</label>
  <label><input type="checkbox" data-check-all-item> github/textarea-autosize</label>
  <label><input type="checkbox" data-check-all-item> github/eventlistener-polyfill</label>
  <label><input type="checkbox" data-check-all-item> github/quote-selection</label>
</div>
```

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/clipboard-copy-element
Description: Copy element text content or input values to the clipboard.
Latest version: 1.3.0

# &lt;clipboard-copy&gt; element

Copy element text content or input values to the clipboard.

## Installation

```
$ npm install --save @github/clipboard-copy-element
```

## Usage

### Script

Import as ES modules:

```js
import '@github/clipboard-copy-element'
```

With a script tag:

```html
<script type="module" src="./node_modules/@github/clipboard-copy-element/dist/index.js">
```

### Markup

```html
<clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">
  Copy path
</clipboard-copy>
<div id="blob-path">src/index.js</div>
```

## Data sources

### Attribute

```html
<clipboard-copy value="src/index.js">Copy</clipboard-copy>
```

### Element content

```html
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<div id="blob-path">src/index.js</div>
```

### Form input

```html
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<input id="blob-path" value="src/index.js">
```

### Hyperlink href

```html
<clipboard-copy for="blob-path">Copy full URL</clipboard-copy>
<a id="blob-path" href="/path/to#my-blob">Link text will not be copied</a>
```

## Events

After copying to the clipboard, a `clipboard-copy` event is dispatched from
the `<clipboard-copy>` element:

```js
document.addEventListener('clipboard-copy', function(event) {
  const button = event.target
  button.classList.add('highlight')
})
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/dependency-submission-toolkit
Description: A TypeScript library for creating dependency snapshots.
Latest version: 2.0.5

# Dependency Submission Toolkit

`@github/dependency-submission-toolkit` is a TypeScript library for creating
dependency snapshots and submitting them to the dependency submission API.
Snapshots are a set of dependencies grouped by manifest with some related
metadata. A manifest can be a physical file or a more abstract representation of
a dependency grouping (such processing of program outputs). After submission to
the API, the included dependencies appear in the repository's
[dependency graph](https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-the-dependency-graph).

## Installation

```
npm install @github/dependency-submission-toolkit
```

## Writing Your Own Dependency Submission Action

You may use classes from `@github/dependency-submission-toolkit` to help in
building your own GitHub Action for submitting dependencies to the Dependency
Submission API. At a high level, the steps to use the classes are:

1. Create a `PackageCache` of all of the packages that could be included in your
   manifest, as well define as the relationships between them.

2. Using the packages defined in `PackageCache`, create a `Manifest` or a
   `BuildTarget`, which defines the dependencies of the build environment or
   specific build artifact.

3. Create a `Snapshot` to include one or more `Manifests` or `BuildTargets`. The
   snapshot is the base container for submitting dependencies to the Dependency
   Submission API.

4. Follow the instructions for
   [Creating a JavaScript Action](https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action).
   These include:

   - Defining an `action.yml` action metadata file
   - Compiling the JavaScript into a single script using `ncc`
   - Testing your action in a workflow

A full example action using this library is included in the `example/`
directory. This example uses the output from the `npm list` to create an
accurate and complete graph of the dependencies used in this library. This
action is also included in a workflow in this repository and runs for each
commit to the `main` branch.
npm package: @github/details-dialog-element
Description: A modal dialog opened with a <details> button.
Latest version: 3.1.4

# &lt;details-dialog&gt; element

A modal dialog opened with a &lt;details&gt; button.

## Installation
Available on [npm](https://www.npmjs.com/) as [**@github/details-dialog-element**](https://www.npmjs.com/package/@github/details-dialog-element).
```
$ npm install --save @github/details-dialog-element
```

## Usage

### Script

Import as ES modules:

```js
import '@github/details-dialog-element'
```

Include with a script tag:

```html
<script type="module" src="./node_modules/@github/details-dialog-element/dist/index.js">
```

### Markup

```html
<details>
  <summary>Open dialog</summary>
  <details-dialog>
    Modal content
    <button type="button" data-close-dialog>Close</button>
  </details-dialog>
</details>
```

## Deferred loading

Dialog content can be loaded from a server by embedding an [`<include-fragment>`][fragment] element.

```html
<details>
  <summary>Robots</summary>
  <details-dialog src="/robots" preload>
    <include-fragment>Loading…</include-fragment>
  </details-dialog>
</details>
```

The `src` attribute value is copied to the `<include-fragment>` the first time the `<details>` button is toggled open, which starts the server fetch.

If the `preload` attribute is present, hovering over the `<details>` element will trigger the server fetch.

## Events

### `details-dialog-close`

`details-dialog-close` event is fired from `<details-dialog>` when a request to close the dialog is made from

- pressing <kbd>escape</kbd>,
- submitting a `form[method="dialog"]`
- clicking on `summary, form button[formmethod="dialog"], [data-close-dialog]`, or
- `dialog.toggle(false)`

This event bubbles, and can be canceled to keep the dialog open.

```js
document.addEventListener('details-dialog-close', function(event) {
  if (!confirm('Are you sure?')) {
    event.preventDefault()
  }
})
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/failbot
Description: A Failbot client for JavaScript
Author: GitHub
Latest version: 0.9.1

# Failbot JS

A [Failbotg](https://github.com/github/failbotg) client for JavaScript.

## Installation

This package is published to npm as `@github/failbot`.

```shell
❯ npm install @github/failbot
```

## Usage:

```javascript
const {Failbot, HTTPBackend, LogBackend} = require('@github/failbot')

const failbot = new Failbot({
  app: 'my-cool-app',
  backends: [new HTTPBackend({haystackURL: process.env.HAYSTACK_URL}), new LogBackend({log: console.log.bind(console)})]
})

try {
  riskyThing()
} catch (error) {
  failbot.report(error, {
    extra: 'metadata',
    can: 'be',
    passed: 'as well'
  })
}
```

In order to attribute reported exceptions to service catalog services, the `catalog_service` tag is included in all exceptions reported via this library. Since all moda deployments have an `OTEL_SERVICE_NAME` environment variable, `catalog_service` is included in every failbot report payload as the value of `OTEL_SERVICE_NAME`.

You should not need to override this value but, if you do, you can pass `catalogService` to the `Failbot` constructor: `const failbot = new Failbot({app: 'my-app', catalogService: 'my-catalog', backends: ...})`. Be aware that overriding this value may make it impossible for your team to receive alerts related to high volumes of exceptions.
npm package: @github/file-attachment-element
Description: Attach files via drag and drop or file input.
Latest version: 3.1.0

# &lt;file-attachment&gt; element

Attach files via drag and drop or file input.

## Installation

```
$ npm install @github/file-attachment-element
```

## Usage

```js
import '@github/file-attachment-element'
```

```html
<file-attachment directory>
  <input type="file" multiple />
</file-attachment>
```

### Optional attributes

- `file-attachment[directory]` enables traversing directories.
- `file-attachment[input]` points to the ID of a file input inside of `<file-attachment>`. If supplied, only files selected from the corresponding `<input>` will be attached to `<file-attachment>`.

### Styling drag state

A boolean `[hover]` attribute is present on `<file-attachment>` while files are dragged over the element.

```css
file-attachment[hover] { border: 2px dashed grey; }
```

### Events

- `file-attachment-accept` – Files were dropped onto the element. Call `event.preventDefault()` to prevent the drop. Bubbles.
- `file-attachment-accepted` – Files were added to the attachment list and can be uploaded by the host app. Bubbles.

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/g-emoji-element
Description: Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.
Latest version: 1.2.0

# &lt;g-emoji&gt; element

Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.

## Installation

```
$ npm install @github/g-emoji-element
```

## Usage

```js
import '@github/g-emoji-element'
```

```html
<g-emoji fallback-src="t-rex.png" alias="T-Rex">🦖</g-emoji>
```

If a browser supports emoji, nothing happens. If a browser does not support emoji, a fallback image tag is created:

```html
<g-emoji fallback-src="t-rex.png" alias="T-Rex">
  <img class="emoji" alt="T-Rex" height="20" width="20" src="t-rex.png">
</g-emoji>
```

### Skin tones

The `tone` attribute renders the emoji with a [skin tone modifier][scale] between 1-5. Use
0 to display the default tone.

[scale]: https://en.wikipedia.org/wiki/Fitzpatrick_scale

```html
<g-emoji tone="0">👋</g-emoji>
<g-emoji tone="1">👋🏻</g-emoji>
<g-emoji tone="2">👋🏼</g-emoji>
<g-emoji tone="3">👋🏽</g-emoji>
<g-emoji tone="4">👋🏾</g-emoji>
<g-emoji tone="5">👋🏿</g-emoji>
```

```js
> const emoji = document.createElement('g-emoji')
> emoji.textContent = '👋'
> emoji.tone = '5'
> document.body.append(emoji)
> emoji.textContent
"👋🏿"
```

The `tone` attribute accepts a space separated list of skin tone modifiers to apply
to each base emoji in a sequence. Some platforms will display these sequences
as a single glyph while others will render each emoji in the sequence.

```html
<g-emoji tone="4 5">🧑🏾<200d>🤝<200d>🧑🏿</g-emoji>
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/hydro-analytics-client
Description: Client SDK for Hydro Analytics
Latest version: 2.4.1

# Hydro Analytics Client

This client sdk provides an easy way to send page views and events to the Hydro Analytics API

## Installation

`npm i -S @github/hydro-analytics-client`

## Setup

See [the API docs](docs/api.md) for instructions on using the `AnalyticsClient`

## Publishing

When you are ready to release a new version, create a new [GitHub Release](https://github.com/github/hydro-analytics-client/releases) with the desired version number. Once the release is created, a GitHub Action will automatically publish the package to the NPM registry.
npm package: @github/image-crop-element
Description: Select area for cropping an image. This does not actually crop.
Latest version: 5.0.0

# &lt;image-crop-element&gt;

This loads an image and creates a crop area that user can modify. An event is fired with x, y, width, and height as the crop area changes.

## Installation

```
$ npm install --save @github/image-crop-element
```

## Usage

### Plain

```html
<image-crop src="/avatar.jpg"></image-crop>
```

### Rounded crop area

```html
<image-crop src="/avatar.jpg" rounded></image-crop>
```

### With loading state

```html
<image-crop src="/avatar.jpg">
  <img src="spinner.gif" alt="" data-loading-slot />
</image-crop>
```

### With autoupdate inputs

```html
<image-crop src="/avatar.jpg">
  <input type="hidden" data-image-crop-input="x" name="x">
  <input type="hidden" data-image-crop-input="y" name="y">
  <input type="hidden" data-image-crop-input="width" name="width">
  <input type="hidden" data-image-crop-input="height" name="height">
</image-crop>
```

### Listen to the change event

```javascript
document.addEventListener('image-crop-change', function (event){
  console.log(
    'Crop area changed.',
    event.detail.x,
    event.detail.y,
    event.detail.width,
    event.detail.height
  )
})
```

## CSS encapsulation
The elements HTML structure is initialized in a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), so it is impossible to apply CSS to it. If you need to change the element's default style for any reason, you should open up a new issue (or a pull request!), describing your use case, and we'll work with you on solving the problem.

## Browser support

Browsers without native [custom element support][support] require a [polyfill][]. Legacy browsers require various other polyfills. See [`examples/index.html`][example] for details.

[example]: https://github.com/github/image-crop-element/blob/57080ad88d26e05b42fa10a95470da8035f53967/examples/polyfill.html#L17-L22

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements
npm package: @github/keytar
Description: Bindings to native Mac/Linux/Windows password APIs
Latest version: 7.10.6

# keytar - Node module to manage system keychain

A native Node module to get, add, replace, and delete passwords in system's keychain. On macOS the passwords are managed by the Keychain, on Linux they are managed by the Secret Service API/libsecret, and on Windows they are managed by Credential Vault.

## Installing

```sh
npm install keytar
```

### On Linux

Currently this library uses `libsecret` so you may need to install it before running `npm install`.

Depending on your distribution, you will need to run the following command:

* Debian/Ubuntu: `sudo apt-get install libsecret-1-dev`
* Red Hat-based: `sudo yum install libsecret-devel`
* Arch Linux: `sudo pacman -S libsecret`

## Building

  * Clone the repository
  * Run `npm install`
  * Run `npm test` to run the tests

## Supported versions

Each release of `keytar` includes prebuilt binaries for the versions of Node and Electron that are actively supported by these projects. Please refer to the release documentation for [Node](https://github.com/nodejs/Release) and [Electron](https://electronjs.org/docs/tutorial/support) to see what is supported currently.

## Bindings from other languages

- [Rust](https://crates.io/crates/keytar)

## Docs

```javascript
const keytar = require('keytar')
```

Every function in keytar is asynchronous and returns a promise. The promise will be rejected with any error that occurs or will be resolved with the function's "yields" value.

### getPassword(service, account)

Get the stored password for the `service` and `account`.

`service` - The string service name.

`account` - The string account name.

Yields the string password or `null` if an entry for the given service and account was not found.

### setPassword(service, account, password)

Save the `password` for the `service` and `account` to the keychain. Adds a new entry if necessary, or updates an existing entry if one exists.

`service` - The string service name.

`account` - The string account name.

`password` - The string password.

Yields nothing.

### deletePassword(service, account)

Delete the stored password for the `service` and `account`.

`service` - The string service name.

`account` - The string account name.

Yields `true` if a password was deleted, or `false` if an entry with the given service and account was not found.

### findCredentials(service)

Find all accounts and password for the `service` in the keychain.

`service` - The string service name.

Yields an array of `{ account: 'foo', password: 'bar' }`.

### findPassword(service)

Find a password for the `service` in the keychain. This is ideal for scenarios where an `account` is not required.

`service` - The string service name.

Yields the string password, or `null` if an entry for the given service was not found.
npm package: @github/markdown-toolbar-element
Description: Markdown formatting buttons for text inputs.
Latest version: 2.2.3

# &lt;markdown-toolbar&gt; element

Markdown formatting buttons for text inputs.

## Installation

```
$ npm install --save @github/markdown-toolbar-element
```

## Usage

```js
import '@github/markdown-toolbar-element'
```

```html
<markdown-toolbar for="textarea_id">
  <md-bold>bold</md-bold>
  <md-header>header</md-header>
  <md-italic>italic</md-italic>
  <md-quote>quote</md-quote>
  <md-code>code</md-code>
  <md-link>link</md-link>
  <md-image>image</md-image>
  <md-unordered-list>unordered-list</md-unordered-list>
  <md-ordered-list>ordered-list</md-ordered-list>
  <md-task-list>task-list</md-task-list>
  <md-mention>mention</md-mention>
  <md-ref>ref</md-ref>
  <button data-md-button>Custom button</button>
</markdown-toolbar>
<textarea id="textarea_id"></textarea>
```

`<markdown-toolbar>` comes with focus management as advised in [WAI-ARIA Authoring Practices 1.1: Toolbar Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/examples/toolbar/toolbar.html). The `md-*` buttons that ship with this package are automatically managed. Add a `data-md-button` attribute to any custom toolbar items to enroll them into focus management.

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/memoize
Description: A simple Memoize helper, with TypeScript decorator support!
Author: GitHub Inc.
Latest version: 1.1.5

# memoize

This is a package which provides a [`memoize`](https://en.wikipedia.org/wiki/Memoization) function, as well as a TypeScript
decorator which will [memoize](https://en.wikipedia.org/wiki/Memoization) a class method.

### Usage

```typescript
import memoize from '@github/memoize'

const fn = memoize(function doExpensiveStuff() {
  // Here's where you do expensive stuff!
})

const other = memoize(function doExpensiveStuff() {}, { 
  cache: new Map(), // pass your own cache implementation
  hash: JSON.stringify // pass your own hashing implementation
})
```

#### Options:

 - `hash?: (...args: A) => unknown`
   Provides a single value to use as the Key for the memoization.
   Defaults to `JSON.stringify` (ish).
 - `cache?: Map<unknown, R>`
   The Cache implementation to provide. Must be a Map or Map-alike. Defaults to a Map.
   Useful for replacing the cache with an LRU cache or similar.

### TypeScript Decorators Support!

This package also includes a decorator module which can be used to provide [TypeScript Decorator](https://www.typescriptlang.org/docs/handbook/decorators.html#decorators) annotations to functions.

Here's an example, showing what you need to do:

```typescript
import memoize from '@github/memoize/decorator'
//                                  ^ note: add `/decorator` to the import to get decorators

class MyClass {
  @memoize() // Memoize the method below
  doThings() {
  }
}

const cache = new Map()
class MyClass {
  @memoize({ cache }) // Pass options just like the memoize function
  doThings() {
  }
}
```

### Why not just use package X?

Many memoize implementations exist. This one provides all of the utility we need at [GitHub](https://github.com/github) and nothing more. We've used a few various implementations in the past, here are some good ones:

 - [memoize](https://www.npmjs.com/package/memoize)
 - [mem](https://www.npmjs.com/package/mem)
 - [lodash.memoize](https://www.npmjs.com/package/lodash.memoize)
 
### Development

```
npm install
npm test
```

### License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/mini-throttle
Description: This is a package which provides `throttle` and `debounce` functions, with both flow and TypeScript declarations, and a minimal code footprint (less than 60 lines, less than 350 bytes minified+gzipped)
Author: GitHub Inc.
Latest version: 2.1.1

# mini-throttle

This is a package which provides `throttle` and `debounce` functions, with both
flow and TypeScript declarations, and a minimal code footprint (less than 60
lines, less than 350 bytes minified+gzipped)


### throttling, debouncing, and everything inbetween

```js
type ThrottleOptions = {
  start?: boolean, // fire immediately on the first call
  middle?: boolean, // if true, fire as soon as `wait` has passed
  once?: boolean, // cancel after the first successful call
}
function throttle<T>(
  callback: (...args: T[]) => any,
  wait: number,
  opts?: ThrottleOptions
): (...args: T[]) => void

function debounce<T>(
  callback: (...args: T[]) => any,
  wait: number,
  opts?: ThrottleOptions
): (...args: T[]) => void
```

This package comes with two functions; `throttle` and `debounce`.

Both of these functions offer the exact same signature, because they're both
the same function - just with different `opts` defaults:

 - `throttle` opts default to `{ start: true, middle: true, once: false }`.
 - `debounce` opts default to `{ start: false, middle: false, once: false }`.

Each of the options changes when `callback` gets called. The best way to
illustrate this is with a marble diagram.

```js
for (let i = 1; i <= 10; ++i) {
  fn(i)
  await delay(50)
}
await delay(100)
```
```
| fn()                                         | 1 2 3 4 5 6 7 8 9 10 |
| throttle(fn, 100)                            | 1 2   4   6   8   10 |
| throttle(fn, 100, {start: false})            |   2   4   6   8   10 |
| throttle(fn, 100, {middle: false})           | 1                 10 |
| throttle(fn, 100, {once: true})              | 1                    |
| throttle(fn, 100, {once: true, start: false})|   2                  |
| debounce(fn, 100)                            |                   10 |
```

### TypeScript Decorators Support!

This package also includes a decorator module which can be used to provide [TypeScript Decorator](https://www.typescriptlang.org/docs/handbook/decorators.html#decorators) annotations to functions.

Here's an example, showing what you need to do:

```typescript
import {throttle} from '@github/mini-throttle/decorators'
//                                           ^ note: add `/decorators` to the import to get decorators

class MyClass {
  @throttle(100, { start: false }) // <- Just like normal throttle, but you omit the callback argument
  doThings() {
    // `MyClass.prototype.doThings` will be throttled!
  }
}
```
npm package: @github/multimap
Description: A map in which more than one value may be stored under each key.
Latest version: 1.0.0

# MultiMap

The [multimap][1] data structure is a map in which more than one value may be stored under each key.

[1]: https://en.wikipedia.org/wiki/Multimap

## Installation

```
$ npm install @github/multimap
```

## Usage

```js
import MultiMap from '@github/multimap'
```

```ts
const map = new MultiMap<string, number>()
map.set('a', 1)
map.set('a', 2)
map.get('a') // => Set([1, 2])
map.has('a') // => true
map.size // => 1
```

### Constructors

- `MultiMap()` - Create an empty map.
- `MultiMap(iterable)` - Create a map with values from an iterable yielding key value pairs: `new MultiMap([['k', 1], ['k', 2]])`

### Methods

- `get(key)` - Retrieve the Set of values stored under a key or the empty Set if the key does not exist.
- `set(key, value)` - Add a value to the key's set without removing previous values. Returns the map so `set` can be chained.
- `has(key)` - Returns true if a value is stored under the key.
- `delete(key)` - Remove key and all of key's values. Returns true if the key existed.
- `delete(key, value)` - Remove a value from the key's set. Returns true if the key and value existed.
- `drain(value)` - Remove a value from all keys that reference it. Returns an array of keys removed.
- `clear()` - Remove all keys and values to empty the map.
- `keys()` - An iterator of map keys.
- `values()` - An iterator of Sets of values for all keys.
- `entries()` - An iterator of [key, Set<value>] pairs.

### Properties

- `size` - The number of keys in the map.

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/paste-markdown
Description: Paste spreadsheet cells as a Markdown table.
Latest version: 1.5.3

# Paste Markdown objects

- Paste spreadsheet cells and HTML tables as a Markdown tables.
- Paste URLs on selected text as Markdown links.
- Paste text containing links as text containing Markdown links.
- Paste image URLs as Markdown image links.
- Paste markdown as markdown. See [`@github/quote-selection`/Preserving markdown syntax](https://github.com/github/quote-selection/tree/9ae5f88f5bc3021f51d2dc9981eca83ce7cfe04f#preserving-markdown-syntax) for details.

## Installation

```
$ npm install @github/paste-markdown
```

## Usage

```js
import {subscribe} from '@github/paste-markdown'

// Subscribe the behavior to the textarea.
subscribe(document.querySelector('textarea[data-paste-markdown]'))
```

Using a library like [selector-observer][so], the behavior can automatically
be applied to any element matching a selector.

[so]: https://github.com/josh/selector-observer

```js
import {observe} from 'selector-observer'
import {subscribe} from '@github/paste-markdown'

// Subscribe the behavior to all matching textareas.
observe('textarea[data-paste-markdown]', {subscribe})
```

### Excluding `<table>`s

Some `<table>`s are not meant to be pasted as markdown; for example, a file content table with line numbers in a column. Use `data-paste-markdown-skip` to prevent it.

```html
<table data-paste-markdown-skip>
  ...
</table>
```

### Granular control for pasting as plain text

If you're wanting more granular support of pasting certain items as plain text by default, you can pass in the controls config at the `subscribe` level.

Our config support looks as follows:

```js
import {subscribe} from '@github/paste-markdown'

// Subscribe the behavior to the textarea with pasting URL links as plain text by default.
subscribe(document.querySelector('textarea[data-paste-markdown]'), {defaultPlainTextPaste: {urlLinks: true}})
```

In this scenario above, pasting a URL over selected text will paste as plain text by default, but pasting a table will still paste as markdown by default.

Only the `urlLinks` param is currently supported.

If there is no config passed in, or attributes missing, this will always default to `false`, being the existing behavior.

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/prettier-config
Description: Prettier config used at GitHub
Author: GitHub Inc.
Latest version: 0.0.6

# prettier-config
Prettier config used at GitHub

## Usage

Install the package using `npm` (or `yarn`)

```sh
npm install --save-dev @github/prettier-config
```

Add the `prettier` key to your `package.json`

```diff
diff --git a/package.json b/package.json
index 2ecef3d..260838f 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "keywords": [
     "prettier"
   ],
+  "prettier": "@github/prettier-config",
   "license": "MIT",
   "author": "GitHub Inc.",
   "main": "index.js"
 ```
 
 [Check out the `prettier` documentation for more info on sharing configurations](https://prettier.io/docs/en/configuration.html#sharing-configurations).
npm package: @github/quote-selection
Description: Add selected text to a text area as a markdown quote.
Latest version: 2.2.0

# Quote selection

Helpers for quoting selected text, appending the text into a `<textarea>` as a Markdown quote.

## Installation

```
$ npm install @github/quote-selection
```

## Usage

```html
<div class="my-quote-region">
  <p>Text to quote</p>
  <textarea></textarea>
</div>
```

```js
import {Quote} from '@github/quote-selection'

document.addEventListener('keydown', event => {
  if (event.key == 'r') {
    const quote = new Quote()
    if (quote.closest('.my-quote-region')) {
      quote.insert(document.querySelector('textarea'))
    }
  }
})
```

`Quote` will take the currently selected HTML from the specified quote region, convert it to markdown, and create a quoted representation of the selection.

`insert` will insert the string representation of a selected text into the specified text area field.

### Preserving Markdown syntax

```js
const quote = new MarkdownQuote('.comment-body')
quote.select(document.querySelector('.comment-body'))
if (quote.closest('.my-quote-region')) {
  quote.insert(quote, document.querySelector('textarea'))
}
```

Using `MarkdownQuote` instead of `Quote` will ensure markdown syntax is preserved.

The optional `scopeSelector` parameter of `MarkdownQuote` ensures that even if the user selection bleeds outside of the scoped element, the quoted portion will always be contained inside the scope. This is useful to avoid accidentally quoting parts of the UI that might be interspersed between quotable content.


## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.