open-index/open-npm huggingface dataset:
npm package: @githubnext/utils
Description: To reduce the cognitive load associated with writing file and folder block components, we've assembled a helper library called `@githunext/utils` that exposes interface definitions and a few helper functions.
Author: GitHub Next
Latest version: 0.23.0

# GitHub Blocks Utils Functions

To reduce the cognitive load associated with writing file and folder block components, we've assembled a helper library called `@githunext/utils` that exposes interface definitions and a few helper functions.

## How to use

`yarn add @githubnext/utils`

```tsx
import {
  FileBlockProps,
  FolderBlockProps,
  getLanguageFromFilename,
  getNestedFileTree,
} from '@githubnext/utils`
```

## FileBlockProps

```tsx
import { FileBlockProps } from '@githubnext/utils';

export default function (props: FileBlockProps) {
  const { content, metadata, onUpdateMetadata } = props;
  ...
}
```

## FolderBlockProps

```tsx
import { FolderBlockProps } from '@githubnext/utils';

export default function (props: FileBlockProps) {
  const { tree, metadata, onUpdateMetadata, BlockComponent } = props;
  ...
}
```

## getLanguageFromFilename

A helper function that returns the "language" of a file, given a valid file path with extension.

## getNestedFileTree

A helper function to turn the flat folder `tree` array into a nested tree structure

import { FolderBlockProps, getNestedFileTree, } from "@githubnext/utils";

```tsx
export default function (props: FolderBlockProps) {
  const { tree, onNavigateToPath } = props;

  const data = useMemo(() => {
    const nestedTree = getNestedFileTree(tree)[0]
    return nestedTree
  }, [tree])
  ...
}
```

## bundleCodesandboxFiles

A helper function to generate a bundle of files to send to CodeSandbox's Sandpack library. For an example, see the [custom Block template repo](https://github.com/githubnext/blocks-template/blob/main/src/components/production-block.tsx).

## onRequestGitHubData

A helper function to handle the `onRequestGitHubData` callback for Blocks. This function will GET data from any GitHub API endpoint.
npm package: @githubocto/snowpack-vscode-extension-template
Description: A create-snowpack-app template for writing VS Code extensions with webviews
Author: Idan Gazit
Latest version: 1.0.0

# snowpack-vscode-extension-template

This is a template for create-snowpack-app which scaffolds a VS Code extension with webviews.

```
npx create-snowpack-app my-vscode-extension --template @githubocto/snowpack-vscode-extension-template
```

## Why does this exist?

The VS Code extension environment comes with a lot of limitations that make it difficult to develop for. Webviews run inside an iframe, and must communicate with the extension via message passing. A strict content security policy is imposed, so that extensions can't go off and do Bad Things™ willy-nilly. There's no such thing as HMR.

While it's still fundamentally web technologies, it's a bear to set up in a fashion that feels like modern web development.

This CSA template offers the following niceties:

- A working Typescript setup for both the extension _and_ the webview.
- A sample react app
- Tailwind CSS for styling, using JIT
- VS Code theme colors exposed as Tailwind colors for ease of "theme-native" styling.
- Lots of little quality-of-life refinements, like a tasks.json which knows to wait for builds to complete before launching the extension host, and css_custom_data.json so that VS Code doesn't complain at you for using `@tailwind` directives in your css.
- … And, of course, Snowpack for the fastest possible builds.

Sadly, incremental builds are not possible with the way that VS Code currently works. That means that each build is effectively "bundling for production" and is executing `snowpack build` for you.

# License

MIT
npm package: @githubocto/tailwind-vscode
Description: Defines Tailwind color classes for VS Code extension colors
Author: Idan Gazit
Latest version: 1.0.5

# tailwind-vscode

Are you authoring VS Code extensions with webviews? Step right up! This is a plugin for Tailwind that exposes VS Code's theme colors as Tailwind colors — with all of the variants (`bg`, `text`, `border`, etc…) Now you can author styles for your extension's webviews with Tailwind and use the active VS Code theme colors.

No, this is not a plugin for VS Code! Your absolutely should check out the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) plugin, though. Not gonna lie, it's pretty fantastic.

## How do I use it?

Add via your favorite package manager. 

```bash
$ npm i -D @githubocto/tailwind-vscode
$ # or yarn, I ain't gonna judge
$ yarn add -D @githubocto/tailwind-vscode
```

Then add the plugin to your `tailwind.config.js`:

```js
module.exports = {
  /* other config stuff here */
  plugins: [require('@githubocto/tailwind-vscode')],
}
```

And style components!

```jsx
<input className='bg-vscode-input-background text-vscode-input-foreground border-vscode-input-border focus:border-vscode-inputOption-activeBorder'/>
```

Doing a little celebratory dance in your chair is optional but encouraged.

The [VS Code theme colors](https://code.visualstudio.com/api/references/theme-color) are represented as Tailwind colors under `vscode`, with hyphens subtituted for periods (`foo.bar` → `foo-bar`).

## How does it work?

Webviews are exposed inside an `<iframe>`. If you open the webview's developer tools and inspect the `<html>`, you'll see a style property with a honking large list of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known by their rapper name, "variables".

These are injected by VS Code, and contain the style colors defined by the active VS Code theme. When a user changes the theme, the variables change. Voilà, themeability inside webviews.

Only, once you get used to Tailwind-y everything, using those color variables is quite jarring.

This plugin creates a `vscode` Tailwind [color object](https://tailwindcss.com/docs/customizing-colors#color-object-syntax) with definitions for every [VS Code theme color](https://code.visualstudio.com/api/references/theme-color). 

You could map these variables manually, like so:

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        vscode: {
          'contrastBorder': 'var(--vscode-contrastBorder)',
          'focusBorder': 'var(--vscode-focusBorder)',
          'foreground': 'var(--vscode-foreground)',
          'widget-shadow': 'var(--vscode-widget-shadow)'
          /* … and 500 more */
```

But this is tedious. Use this plugin and spend your time on loftier pursuits.

## License

MIT
npm package: @githubtraining/github-exercise-manager
Description: GitHub hands-on exercise manager
Author: mattdavis0351
Latest version: 1.5.0

[![CI GitHub Exercise Manager](https://github.com/githubtraining/github-exercise-manager/actions/workflows/CI.yml/badge.svg)](https://github.com/githubtraining/github-exercise-manager/actions/workflows/CI.yml) ![npm (scoped)](https://img.shields.io/npm/v/@githubtraining/github-exercise-manager?label=NPM%20Version)

# GitHub Exercise Manager

A command line tool used to quickly scaffold the files needed to create an exercise using Actions on GitHub.

## Usage

**Basic Usage**

`npx @githubtraining/github-exercise-manager <command> <parameters> [options]`

Create an exercise in the current directory named **bread**

`npx @githubtraining/github-exercise-manager new-exercise bread`

Create an exercise named **bread** in a different project directory

`npx @githubtraining/github-exercise-manager new-exercise bread -p ~/projects/my-project`

Create an exercise named **bread** that uses Looking Glass version 4 and sets the GitHub repository **mona/my-exercise** as upstream

`npx @githubtraining/github-exercise-manager new-exercise bread -v 4 -o mona -r my-exercise`

**Commands**
| Command | Description |
| ------------------ | ----------------------------------- |
| `new-exercise` | Scaffolds a new exercise |

**CLI Parameters**

| Parameter          | Description                         | Required | Templating Keyword |
| ------------------ | ----------------------------------- | -------- | ------------------ |
| `<exercise-title>` | Name of the exercise being authored | Yes      | `title`            |

**CLI Flags**

| Flag                        | Description                                                                    | Default Value                   | Templating Keyword |
| --------------------------- | ------------------------------------------------------------------------------ | ------------------------------- | ------------------ |
| `-a`, `--action-name`       | User defined name for the local action of the exercise                         | local-action                    | `actionName`       |
| `-o`, `--github-owner`      | Username or organization that has ownership of the desired exercise repository | Empty                           | `githubOwner`      |
| `-p`, `--project-path`      | Path where the exercise will be created                                        | Current directory               | `projectPath`      |
| `-r`, `--github-repository` | Name of the exercise repository                                                | Empty                           | `githubRepository` |
| `-v`, `--lg-version`        | Looking Glass version you wish to use in the grading.yml exercise file"        | Latest release of Looking Glass | `lgVersion`        |
npm package: @gitignorejs/gitignore-cli
Description: A gitignore manager based on github/gitignore
Author: Daijiro Wachi
Latest version: 0.1.1

# gitignore-cli [![Build Status](https://travis-ci.org/watilde/gitignore-cli.svg?branch=master)](https://travis-ci.org/watilde/gitignore-cli)
A gitignore manager based on [github/gitignore](https://github.com/github/gitignore)

## Usage

```console
$ gitignore -h
A gitignore manager based on gitub/gitignore

Commands:
  gitignore add   add a specified gitignore file                 [aliases: a]
  gitignore list  List all gitignore files                       [aliases: l]

Options:
  --help, -h     Show help                                             [boolean]
  --version, -v  Show version information                              [boolean]
```
## Install via npm

```console
$ npm install --global @gitignorejs/gitignore-cli
```

## Committers
+ [@watilde](https://github.com/watilde)
+ [@uetchy](https://github.com/uetchy)