open-index/open-npm huggingface dataset:
npm package: @jsjoeio/code-server
Description: Run VS Code on a remote server.
Latest version: 3.11.11

# code-server

[!["GitHub Discussions"](https://img.shields.io/badge/%20GitHub-%20Discussions-gray.svg?longCache=true&logo=github&colorB=purple)](https://github.com/cdr/code-server/discussions) [!["Join us on Slack"](https://img.shields.io/badge/join-us%20on%20slack-gray.svg?longCache=true&logo=slack&colorB=brightgreen)](https://cdr.co/join-community) [![Twitter Follow](https://img.shields.io/twitter/follow/CoderHQ?label=%40CoderHQ&style=social)](https://twitter.com/coderhq) [![codecov](https://codecov.io/gh/cdr/code-server/branch/main/graph/badge.svg?token=5iM9farjnC)](https://codecov.io/gh/cdr/code-server) [![See v3.11.1 docs](https://img.shields.io/static/v1?label=Docs&message=see%20v3.11.1%20&color=blue)](https://github.com/cdr/code-server/tree/v3.11.1/docs)

Run [VS Code](https://github.com/Microsoft/vscode) on any machine anywhere and
access it in the browser.

![Screenshot](./assets/screenshot.png)

## Highlights

- Code on any device with a consistent development environment
- Use cloud servers to speed up tests, compilations, downloads, and more
- Preserve battery life when you're on the go; all intensive tasks run on your
  server

## Requirements

See [requirements](requirements.md) for minimum specs, as well as instructions
on how to set up a Google VM on which you can install code-server.

**TL;DR:** Linux machine with WebSockets enabled, 1 GB RAM, and 2 CPUs

## Getting started

There are three ways to get started:

1. Using the [install
   script](https://github.com/cdr/code-server/blob/main/install.sh), which
   automates most of the process. The script uses the system package manager if
   possible.
2. Manually [installing
   code-server](https://coder.com/docs/code-server/v3.11.1/install)
3. Using our one-click buttons and guides to [deploy code-server to a cloud
   provider](https://github.com/cdr/deploy-code-server) ⚡

If you use the install script, you can preview what occurs during the install
process:

```bash
curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run
```

To install, run:

```bash
curl -fsSL https://code-server.dev/install.sh | sh
```

When done, the install script prints out instructions for running and starting
code-server.

We also have an in-depth [setup and
configuration](https://coder.com/docs/code-server/v3.11.1/guide) guide.

## TLS and authentication (beta)

To add TLS and authentication out of the box, use [code-server --link](https://coder.com/docs/code-server/v3.11.1/link).

## Questions?

See answers to [frequently asked
questions](https://coder.com/docs/code-server/v3.11.1/FAQ).

## Want to help?

See [Contributing](https://coder.com/docs/code-server/v3.11.1/CONTRIBUTING) for
details.

## Hiring

Interested in [working at Coder](https://coder.com/careers)? Check out [our open
positions](https://coder.com/careers#openings)!

## For Organizations

Want remote development for your organization or enterprise? Visit [our
website](https://coder.com) to learn more about Coder.
npm package: @jsjoeio/hello-component
Description: A component that says &#x27;Hello world!&#x27;
Author: jsjoeio
Latest version: 1.0.2

# @jsjoeio/hello-component

> A component that says &#x27;Hello world!&#x27;

[![NPM](https://img.shields.io/npm/v/@jsjoeio/hello-component.svg)](https://www.npmjs.com/package/@jsjoeio/hello-component) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jsjoeio/hello-component
```

## Usage

```jsx
import React, { Component } from 'react'

import HelloComponent from '@jsjoeio/hello-component'

class Example extends Component {
  render () {
    return (
      <HelloComponent />
    )
  }
}
```

## License

MIT © [jsjoeio](https://github.com/jsjoeio)
npm package: @jsjoeio/hello-world
Description: <div align="center">   <div>     <h1 align="center">npx-template</h1>   </div> 	<p>📦 📄 A modern template for authoring npx packages in TypeScript & ESM</p> 	<!-- <a href="https://www.npmjs.com/package/your-package"><img src="https://img.shields.io/npm/v
Author: Joe Previte
Latest version: 0.0.2

<div align="center">
  <div>
    <h1 align="center">npx-template</h1>
  </div>
	<p>📦 📄 A modern template for authoring npx packages in TypeScript & ESM</p>
	<!-- <a href="https://www.npmjs.com/package/your-package"><img src="https://img.shields.io/npm/v/your-package" alt="Current version"></a> -->
    <p>
       <a href="https://typescriptcourse.com">
            Learn Full-Stack TypeScript
       </a>
    </p>
  <a href="https://twitter.com/jsjoeio">
    <img src="https://img.shields.io/twitter/follow/jsjoeio?style=flat&label=jsjoeio&logo=twitter&color=0bf&logoColor=fff" alt="jsjoeio Twitter follower count" />
  </a>
</div>

---

## Usage

1. Click "Use as template" or fork.

2. Build your package

3. Add `NPM_TOKEN` to repo secrets

4. Push up and it will publish to npm

### Testing Locally

To test locally, run `pnpm build` then `node dist/cli.mjs`.

### Add spice

To spice up your npx package, we recommend checking out [`clack`](https://github.com/natemoo-re/clack).

## Inspiration

This project came out of a conversation with [@nutlope](https://twitter.com/nutlope) after helping him build [`aicommits`](https://github.com/Nutlope/aicommits) and some of my work on [`add-ts-jest`](https://github.com/jsjoeio/add-ts-jest).
npm package: @jsjoeio/lotr-sdk
Description: an SDK to easily consume the Lord of the Rings API
Author: Joe Previte
Latest version: 0.0.2

# `@jsjoeio/lotr-sdk` - an SDK to easily consume the Lord of the Rings API

![npm](https://img.shields.io/npm/v/@jsjoeio/lotr-sdk)

## Install

```shell
yarn add @jsjoeio/lotr-sdk
```

```shell
npm install @jsjoeio/lotr-sdk
```

### Usage

```typescript
import LotrSDK from "@jsjoeio/lotr-sdk";

const apiToken = process.env.LOTR_API_TOKEN
const sdk = new LotrSDK(apiToken)

sdk.getMovies() // returns array of movies
sdk.getMovieById(id)  // returns movie
sdk.getMovieQuote(id) // returns array of quotes from movie

```

## LICENSE

MIT. Just make sure you give acknowledgements to this repo.
npm package: @jsjoeio/react-use-chuck-norris
Description: A custom React Hook which gives you a Chuck Norris joke
Author: jsjoeio
Latest version: 1.0.0

# @jsjoeio/react-use-chuck-norris

> A custom React Hook which gives you a Chuck Norris joke

[![NPM](https://img.shields.io/npm/v/@jsjoeio/react-use-chuck-norris.svg)](https://www.npmjs.com/package/@jsjoeio/react-use-chuck-norris) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jsjoeio/react-use-chuck-norris
```

## Usage

```jsx
import React, { Component } from 'react'

import { useChuckNorris } from '@jsjoeio/react-use-chuck-norris'

const Example = () => {
  const { data, loading, error} = useChuckNorris()

  if (loading) return <p>Loading...</p>

  if (error) return <p>Oh no! There was an error: {error}</p>

if (data)
  // Data returns a Chuck Norris joke as a string
  // Each joke is random
  return (
    <p>{data}</p>
  )
}
```

## License

MIT © [jsjoeio](https://github.com/jsjoeio)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @jsjoeio/react-use-star-wars-quote
Description: a custom React Hook that gives you a Star Wars quote
Author: jsjoeio
Latest version: 1.0.0

# @jsjoeio/react-use-star-wars-quote

> a custom React Hook that gives you a Star Wars quote

[![NPM](https://img.shields.io/npm/v/@jsjoeio/react-use-star-wars-quote.svg)](https://www.npmjs.com/package/@jsjoeio/react-use-star-wars-quote) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jsjoeio/react-use-star-wars-quote
```

## Usage

```jsx
import React, { Component } from 'react'

import { useMyHook } from '@jsjoeio/react-use-star-wars-quote'

const Example = () => {
  const example = useMyHook()
  return (
    <div>{example}</div>
  )
}
```

## License

MIT © [jsjoeio](https://github.com/jsjoeio)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @jsjoeio/react-use-sw-quote
Description: a custom React Hook for getting a random Star Wars Quote
Author: jsjoeio
Latest version: 1.0.0

# @jsjoeio/react-use-sw-quote

> a custom React Hook for getting a random Star Wars Quote

[![NPM](https://img.shields.io/npm/v/@jsjoeio/react-use-sw-quote.svg)](https://www.npmjs.com/package/@jsjoeio/react-use-sw-quote) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jsjoeio/react-use-sw-quote
```

## Usage

```jsx
import React from 'react'
import { useStarWarsQuote } from '@jsjoeio/react-use-sw-quote'

const App = () => {
  const { quote, loading } = useStarWarsQuote('')
  // Quote returns a random quote as a string
  // loading returns a boolean

  if (loading) {
    return <div>Loading...</div>
  }

  if (quote) {
    return <div>
      {quote}
    </div>
  }

  return null
}
export default App
```

## License

MIT © [jsjoeio](https://github.com/jsjoeio)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @jsjoeio/react-use-the-things
Description: a package that gives you custom React things
Author: jsjoeio
Latest version: 1.0.3

# @jsjoeio/react-use-the-things

> a package that gives you custom React things

[![NPM](https://img.shields.io/npm/v/@jsjoeio/react-use-the-things.svg)](https://www.npmjs.com/package/@jsjoeio/react-use-the-things) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jsjoeio/react-use-the-things
```

## Usage

```jsx
import React from 'react'

import { TwilioLogo, useCounter, useDocumentTitle } from '@jsjoeio/react-use-the-things'

const App = () => {
  const [count, setCount] = useCounter(4)
  useDocumentTitle(count)
  return (
    <div>
      <TwilioLogo
        height='240px'
        width='520px'
        customStyles={{ border: '1px solid black' }}
    />
    <p>Currently, the count is: {count}</p>
    <button onClick={() => setCount(count + 1)}>Add 1</button>
    <button onClick={() => setCount(count - 1)}>Subtract 1</button>
    </div>
  )
}
```

## License

MIT © [jsjoeio](https://github.com/jsjoeio)
npm package: @jsjoeio/streak-counter
Description: This is a basic streak counter - inspired by Duolingo - written in TypeScript and meant for the browser (uses `localStorage`).
Author: Joe Previte
Latest version: 0.0.4

# `@jsjoeio/streak-counter` - a basic streak counter

This is a basic streak counter - inspired by Duolingo - written in TypeScript and meant for the browser (uses `localStorage`).

## Install

```shell
yarn add @jsjoeio/streak-counter
```

```shell
npm install @jsjoeio/streak-counter
```

### Usage

[![Edit streak-counter (egghead)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/streak-counter-egghead-twsw1?fontsize=14&hidenavigation=1&theme=dark)

```typescript
import { streakCounter } from "@jsjoeio/streak-counter";

const today = new Date();
const streak = streakCounter(localStorage, today);
// streak returns an object:
// {
//    currentCount: 1,
//    lastLoginDate: "11/11/2021",
//    startDate: "11/11/2021",
// }
```
npm package: @jsjoeio/streak-counter-2
Description: a streak counter inspired by Duolingo
Author: Joe Previte
Latest version: 0.0.2

# `@jsjoeio/streak-counter` - a basic streak counter

This is a basic streak counter - inspired by Duolingo - written in TypeScript and meant for the browser (uses `localStorage`).

## Install

```shell
yarn add @jsjoeio/streak-counter
```

```shell
npm install @jsjoeio/streak-counter
```

### Usage

```typescript
import { streakCounter } from "@jsjoeio/streak-counter";

const today = new Date();
const streak = streakCounter(localStorage, today);
// streak returns an object:
// {
//    currentCount: 1,
//    lastLoginDate: "11/11/2021",
//    startDate: "11/11/2021",
// }
```
npm package: @jsjoeio/use-click-outside
Description: A custom React Hook to help you close a menu by clicking outside of it
Author: jsjoeio
Latest version: 1.0.1

# @jsjoeio/use-click-outside

> A custom React Hook to help you close a menu by clicking outside of it

[![NPM](https://img.shields.io/npm/v/@jsjoeio/use-click-outside.svg)](https://www.npmjs.com/package/@jsjoeio/use-click-outside) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jsjoeio/use-click-outside
```

## Props

| prop           | type    | example                | description                                                            |
| -------------- | ------- | ---------------------- | ---------------------------------------------------------------------- |
| `initialValue` | Boolean | false                  | the intial state of the menu (i.e. open put `false` closed put `true`) |
| `elementId`    | string  | "inner-menu"           | the id on the element containing the menu (i.e. all your links)        |
| `appId`        | string  | "my-awesome-react-app" | the id on the container of your entire app                             |

## Usage

```jsx
import React from 'react'
import { ToggleButton, InnerMenu } from './Nav.styles'
import { useClickOutside } from '@jsjoeio/use-click-outside'

function Nav() {
  const [open, setOpen] = useClickOutside({
    initialValue: false,
    elementId: 'inner-menu',
    appId: 'example-react-app'
  })

  return (
    <header>
      <nav>
        <ToggleButton onClick={() => setOpen(!open)}>Menu</ToggleButton>
        <InnerMenu open={open} id="inner-menu">
          <ul>
            <li>Home</li>
            <li>Products</li>
            <li>Values</li>
            <li>Team</li>
            <li>Contact</li>
          </ul>
        </InnerMenu>
      </nav>
    </header>
  )
}

export default Nav
```

## License

MIT © [jsjoeio](https://github.com/jsjoeio)

---

This hook was created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @jsjoeio/use-star-wars-quote
Description: a custom React hook that provides a random Star Wars quote
Author: jsjoeio
Latest version: 1.0.0

# @jsjoeio/use-star-wars-quote

> a custom React hook that provides a random Star Wars quote

[![NPM](https://img.shields.io/npm/v/@jsjoeio/use-star-wars-quote.svg)](https://www.npmjs.com/package/@jsjoeio/use-star-wars-quote) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jsjoeio/use-star-wars-quote
```

## Usage

```jsx
import React from 'react'
import { useStarWarsQuote } from '@jsjoeio/use-star-wars-quote'

const App = () => {
  const { quote, loading } = useStarWarsQuote()

  if (loading) return <p>Loading...</p>

  if (quote) {
    return (
      <div>
        {quote}
      </div>
    )
  }

  return null
}
export default App
```

## License

MIT © [jsjoeio](https://github.com/jsjoeio)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).