open-index/open-npm huggingface dataset:
npm package: @halfmatthalfcat/odyc
Description: **Odyc.js** is a tiny JavaScript library designed to create narrative games by combining pixels, sounds, text, and a bit of logic. Everything is built through code, but without unnecessary complexity: your entire game can fit in a single file.
Latest version: 0.0.84-next.8

# odyc.js

**Odyc.js** is a tiny JavaScript library designed to create narrative games by combining pixels, sounds, text, and a bit of logic.
Everything is built through code, but without unnecessary complexity: your entire game can fit in a single file.

🔗 **Get started** → [https://odyc.dev](https://odyc.dev)

### Installation

```bash
npm install odyc
```

### Quick example

```js
import { createGame } from 'odyc'

const game = createGame({
	player: {
		sprite: `
			...00...
			...00...
			.000000.
			0.0000.0
			0.0000.0
			..0000..
			..0..0..
			..0..0..
		`,
		position: [3, 1],
	},
	templates: {
		x: { sprite: 2 },
	},
	map: `
		xxxxxxxx
		x......x
		x......x
		x......x
		x......x
		x......x
		x......x
		xxxxxxxx
	`,
})
```
npm package: @halfmatthalfcat/rehype-class-names
Description: A utility plugin to use with rehype that adds class names to HAST (html tree)
Author: Matt Oliver
Latest version: 1.0.0

# Rehype Class Names

Adding classes to elements with rehype. Includes typescript support

## Installation

```
npm install @halfmatthalfcat/rehype-class-names
```

## API

### `rehype().use(addClasses, additions])`

Add to `rehype` or `unified` pipeline with `.use`, where `additions` is an object
with keys that are the css selectors and the values are the classes you want to add.  

For more information on what keys you can pass, see the [`hast-util-select`](https://github.com/syntax-tree/hast-util-select#support) documentation.
For more information on what values you can pass, see the [`hast-util-classnames`](https://github.com/syntax-tree/hast-util-classnames#use) documentation.

Example:

```js
.use(addClasses, {
    'h1,h2,h3': 'title',
    h1: 'is-1',
    h2: 'is-2',
    h3: { 'hello': false, 32: true },
    h4: 10,
    h5: [],
    p: 'one two',
    a: "test",
    ol: "list-decimal",
    li: ['test', 'mega'],
})
```

This will output

```html
<h1 class="title is-1">header</h1>
<h2 class="title is-2">sub 2</h2>
<h3 class="title 32">sub 3</h3>
<h4 class="10">sub 4</h4>
<h5 class="">Sub 5</h5>
<p class="one two">
  Profile pictures are important.
  <a href="riderjensen.com" class="test">Rider Jensen</a>
</p>
<ol class="list-decimal">
  <li class="test mega">Create a Github repository</li>
  <li class="test mega">Pushed up code</li>
  <li class="test mega">Connect account to Github</li>
</ol>
```
npm package: @halfmatthalfcat/svg-cf
Description: SVG.js + svgdom + AsyncLocalStorage for Cloudflare Workers
Author: Matt Oliver
Latest version: 0.1.3

# svg-cf

_SVG.js + svgdom + AsyncLocalStorage for usage in Cloudflare Workers_

`svg-cf` is a combination of libraries and Node APIs to enable isolated SVG creation in Cloudflare Workers.

Originally in SVG.js + svgdom, you needed to create a new svgdom window/document instance via `createSVGWindow` and then attach that window to a **global, singleton** instance (`registerWindow`),
which doesn't necessarily work in async contexts as you may have concurrent requests operating on the same document.

`svg-cf` leverages Node's `AsyncLocalStorage` construct to persist a `window` in any given async context so that each async context can operate on windows independently of each other.

`svg-cf` also utilizes `svgdom-cf`, a fork of svgdom that is compatible
for running in Cloudflare Workers. Check out the [@halfmatthalfcat/svgdom-cf](https://github.com/halfmatthalfcat/svgdom-cf) repo for more info.

## Usage

```js
import { SVG, withWindow } from '@halfmatthalfcat/svg-cf'

export default {
  async fetch(req) {
    return withWindow(() => {
      const svg = SVG().size(100, 100)
      svg.rect(100, 100).fill('green')

      return Response(svg.svg(), {
        headers: {
          'Content-Type': 'image/svg+xml'
        }
      })
    })
  }
}
```

### Fonts

#### Via Node

Refer to the documentation in [svgdom-cf](https://github.com/halfmatthalfcat/svgdom-cf) regarding fonts.

```js
import { svgdom } from '@halfmatthalfcat/svg-cf'
import fs from 'node:fs'

svgdom.config.setFonts(fs.readFileSync('path/to/font.ttf'))
```

#### Via Wrangler/CF

Refer to the documentation in [svgdom-cf](https://github.com/halfmatthalfcat/svgdom-cf) regarding fonts.

##### Wrangler Config

```toml
rules = [
  { type = "Data", globs = ["**/*.ttf"], fallthrough = true }
]
```

##### Worker Script

```js
import { svgdom } from '@halfmatthalfcat/svg-cf'
import Ariel from './Ariel.ttf'

svgdom.config.setFonts(Ariel)
```

## Installation

### Npm:

```sh
npm install @halfmatthalfcat/svg-cf
```

### Yarn:

```sh
yarn add @halfmatthalfcat/svg-cf
```

## Resources

- [SVG.js](https://svgjs.dev/docs/3.0/)
- [svgdom-cf](https://github.com/halfmatthalfcat/svgdom-cf)
- [AsyncLocalStorage](https://nodejs.org/api/async_context.html#class-asynclocalstorage)
npm package: @halfmatthalfcat/svgals
Description: SVG.js + svgdom + AsyncLocalStorage
Author: Wout Fierens
Latest version: 0.0.6

# svgals

SVG.js + svgdom + AsyncLocalStorage

`svgals` is a combination of technologies to enable isolated SVG creation in Node-specific contexts only. Specifically, `svgals` seeks to
create isolated `documents` to create SVGs between async contexts, such as Serverless handler requests.

Originally in SVG.js + svgdom, you needed to create a new svgdom document instance via `createSVGWindow` and then attach that window to a **global** instance (`registerWindow`),
which doesn't necessarily work in async contexts as you may override an existing document.

`svgals` leverages Node's `AsyncLocalStorage` construct to persist a `window` in any given async context so that each async context can operate on windows independently of each other.

## Usage

```javascript
// Cloudflare Worker

import { SVG, withWindow } from '@halfmatthalfcat/svgals'

export default {
  async fetch(req) {
    return withWindow(() => {
      const svg = SVG().rect(100, 100).fill('#f06').svg()

      return Response(svg, {
        headers: {
          'Content-Type': 'image/svg+xml'
        }
      })
    })
  }
}
```

## Installation

### Npm:

```sh
npm install @halfmatthalfcat/svgals
```

### Yarn:

```sh
yarn add @halfmatthalfcat/svgals
```

## Documentation

- [SVG.js](https://svgjs.dev/docs/3.0/)
- [svgdom](https://github.com/svgdotjs/svgdom)
- [AsyncLocalStorage](https://nodejs.org/api/async_context.html#class-asynclocalstorage)
npm package: @halfmatthalfcat/svgdom-cf
Description: Cloudflare Worker compatible svgdom implementation
Author: Matt Oliver
Latest version: 0.2.8

# svgdom-cf

This is a fork of the original `svgdotjs/svgdom` that is compatible with running in Cloudflare Workers.
It removes many of the non-supported Node API depdencies and replaces them with CF Worker compabile
alternatives, namely around image sizing and font handling.

## Install

```
npm install @halfmatthalfcat/svgdom-cf
```

## Fonts

To utilize fonts, you **must** load your own fonts into `svgdom`, there are no default fonts. If you do not, any usage of fonts will essentially noop.

Instead of the original way of loading fonts from the file system, this fork of `svgdom` acceps font Buffers and uses the [postscript name](https://developer.mozilla.org/en-US/docs/Web/API/FontData/postscriptName) of the supplied font to identify itself.

If you need to _get_ the postscript name to subsequenty use, leverage the `getPostscriptName` function that is exported from this package.

### Supported Font Types

Font loading is controlled by the [fontkit library](https://github.com/foliojs/fontkit/blob/master/src/index.js). It supports:

- TIFF
- WOFF
- WOFF2
- TrueType
- DFont

### Wrangler Config

Cloudflare allows you to import and bundle raw data files when deploying Workers. You can do this by
configuring your `wrangler.toml` to allow imported file types of certain extensions to be bundled as Buffers via:

```toml
rules = [
  { type = "Data", globs = ["**/*.woff2"], fallthrough = true }
]
```

## Usage

In your CF Worker, you will want to import and load the fonts **outside of your handler** to cache between
invocations.

```js
import { setFonts } from "@halfmatthalfcat/svgdom-cf";

import Ariel from "./ariel.woff2";
import TimesNewRoman from "./tnr.tiff";

setFonts(Ariel, TimesNewRoman);

export default {
  fetch() {
    // CF fetch handler
  },
};
```

You typically don't use `svgdom` alone, but with `SVG.js` to actually build SVGs. Luckily, there is a
companion library `@halfmatthalfcat/svg-cf` that combines this library, a modified `SVG.js` and the usage
of AsyncLocalStorage to efficiently build SVGs to serve in Workers.

Check out the [@halfmatthalfcat/svg-cf](https://github.com/halfmatthalfcat/svg-cf) project for more info.