open-index/open-npm huggingface dataset:
npm package: @jcha0713/astro-notion
Description: Data fetching tool that connects Astro and Notion
Author: Joohoon Cha
Latest version: 0.1.3

# Astro-Notion

Astro-Notion provides components to build static websites using [Astro](https://astro.build/) and lets you use [Notion](https://www.notion.so/) as your main CMS tool.

---

## Getting Started

# Installation

To install @jcha0713/astro-notion package, run the following command:

```bash
npm install @jcha0713/astro-notion @notionhq/client
```

or you can use yarn instead.

## Basic Setup

### Notion

1. Log in to Notion.
2. go to [my-integrations](https://www.notion.so/my-integrations) and press **New integration.**
3. Create new integration for your website in desired workspace. Only the permission to **Read content** is needed.
4. Go to [https://heliotrope-lavender-f03.notion.site/Example-Database-a845c6d59ead4034be1b637c6381073d](https://www.notion.so/Example-Database-a845c6d59ead4034be1b637c6381073d) and click **duplicate** on the upper right corner to use it as a template.
5. You could also create and use your own database(inline table). Make sure it has **title**, **date**, **draft**, and **slug** columns.
6. Click share button on the upper right side and add the integration you created in step 3.
7. Lastly, you need the **database id**. To find this, click share button again and click copy link on the bottom. Paste it in any text box and copy the **32 characters** after your workspace name or `[notion.so](http://notion.so)` and the slash and before the question mark(`?`).

For more detailed work-through, see [_this tutorial_](https://developers.notion.com/docs/getting-started) provided by Notion.

### Astro

1. Copy the **Internal Integration Token** and create a variable in `.env` and name it `NOTION_API_KEY`.
2. Copy the database id and create another variable in `.env`. Name it `NOTION_DATABASE_ID`.
3. Astro-notion uses `astro-imagetools` package to display images. Here is an example config code you can copy and use it.

```javascript
// astro.config.mjs

import { defineConfig } from 'astro/config';
import { astroImageTools } from 'astro-imagetools';

// https://astro.build/config
export default defineConfig({
  publicDir: './public',
  outDir: './dist',
  vite: {
    plugins: [
      {
        name: 'import.meta.url-transformer',
        transform: (code, id) => {
          if (id.endsWith('.astro'))
            return code.replace(/import.meta.url/g, `"${id}"`);
        },
      },
    ],
    ssr: {
      external: ['svgo'],
    },
  },
  experimental: { integrations: true },
  integrations: [astroImageTools],
});
```

```javascript
// astro-imagetools.config.mjs

// create astro-imagetools.config.mjs
// in your project root folder

import { defineConfig } from 'astro-imagetools/config';

export default defineConfig({
  fallbackFormat: 'png',
});
```
npm package: @jcharante/vue-long-press-directive
Description: Long press directive plugin for Vue.js
Latest version: 1.1.2

# vue-long-press-directive

Long press directive plugin for Vue.js. See the [live demo](https://kapetan.github.io/vue-long-press-directive/demo/index.html).

    npm install @jcharante/vue-long-press-directive

## Usage

Register the plugin with Vue. It's possible to specify the press duration in the options object.

```javascript
var Vue = require('vue')
var longpress = require('vue-long-press-directive')

Vue.use(longpress, { duration: 1000 })
```

The directive can now be used in a template.

```html
<button v-long-press='onlongpress'>Press and hold</button>
```

If you want to pass arguments, you're going to need to wrap the function so it doesn't get called immediately.

```html
<button v-long-press="(() => { onlongpress(1) })">Button 1</button>
<button v-long-press="(() => { onlongpress(2) })">Button 2</button>
```

DO NOT DO

```html
<button v-long-press="onlongpress(1)">Button 1</button>
```

because your function will get called a bunch of times without being long pressed.
npm package: @jchavarri/bs-atdgen-codec-runtime
Description: bucklescript runtime for atdgen
Author: Ahrefs
Latest version: 1.4.4-postinstall.2

# bs-atdgen-codec-runtime

`bs-atdgen-codec-runtime` is a bucklescript runtime for
[atdgen](https://github.com/mjambon/atd). It is based on the json type
provided by bucklescript and combinators of
[@glennsl/bs-json](https://github.com/glennsl/bs-json).

The support of bucklescript in atdgen has not been released
yet. atdgen must be installed from the git master branch to have the
`-bs` option. The version 1.1.0 of bs-atdgen-codec-runtime is known to
work with the version [`8c08659`](https://github.com/mjambon/atd/tree/8c08659c5858ef1d09d666bbd4815a2f6c48bde0)
of atdgen.

## Installation

```
yarn add @jchavarri/bs-atdgen-codec-runtime
```

This package doesn't take care of running atdgen to derive code from
type definitions. This step requires the `atdgen` binary which can be
obtained using [opam](https://opam.ocaml.org/).

## Usage

Add `@jchavarri/bs-atdgen-codec-runtime` to the `bs-dependencies` of
`bsconfig.json`.

To write atd type definitions, please have a look at the [great atd
documentation](https://atd.readthedocs.io/en/latest/).

## Simple example

Reason code to query and deserialize the response of a REST API. It
requires `bs-fetch`.

```
let get = (url, decode) =>
  Js.Promise.(
    Fetch.fetchWithInit(
      url,
      Fetch.RequestInit.make(~method_=Get, ()),
    )
    |> then_(Fetch.Response.json)
    |> then_(json => json |> decode |> resolve)
  );

let v: Meetup_t.events =
  get(
    "http://localhost:8000/events",
    Atdgen_codec_runtime.Decode.decode(Meetup_bs.read_events),
  );
```

## Full example

The [example](example) directory contains a full example of a simple
cli to read and write data in a JSON file.

For a complete introduction from atdgen installation to json
manipulation, please refer to [Getting started with atdgen and
bucklescript](https://tech.ahrefs.com/getting-started-with-atdgen-and-bucklescript-1f3a14004081)
npm package: @jchavarri/bs-atdgen-generator
Description: Atdgen prebuilt binaries for 3 major OS platforms.
Author: Javier Chávarri
Latest version: 0.1.0

# bs-atdgen-generator

[Atdgen](https://github.com/ahrefs/atd) prebuilt binaries for 3 major OS platforms.

Mainly for BuckleScript users, to avoid the step of installing esy.

## Getting started

(Prefer example? Check the [test](./test) folder)

With yarn:

```
yarn add -D @jchavarri/bs-atdgen-generator
yarn --check-files
```

Tell bsb which files need to be processed:

```json
"generators": [
  {
    "name": "atd_t",
    "command": "yarn run atdgen -t $in"
  },
  {
    "name": "atd_bs",
    "command": "yarn run atdgen -bs $in"
  }
],
```

Or with node:
```
npm install @jchavarri/bs-atdgen-generator --save-dev
```

And then:

```json
"generators": [
  {
    "name": "atd_t",
    "command": "npx atdgen -t $in"
  },
  {
    "name": "atd_bs",
    "command": "npx atdgen -bs $in"
  }
],
```

Now that the generator is defined, add the files that need to be processed to `sources` (still in `bsconfig`):

```json
"sources": {
  "dir" : "src",
  "subdirs" : true,
  "generators": [
    {
      "name": "atd_t",
      "edge": ["meetup_t.ml", "meetup_t.mli", ":", "meetup.atd"]
    },
    {
      "name": "atd_bs",
      "edge": ["meetup_bs.ml", "meetup_bs.mli", ":", "meetup.atd"]
    }
  ]
},
```

## For Windows users

Unfortunately, it's not possible for `npx` or `yarn run` to work directly in Windows environments, due to
the way [ninja calls CreateProcess](https://github.com/jchavarri/bs-atdgen-generator/pull/3#issue-415706268).

In order to use atdgen for this platform, there are two options:

#### 1. Use relative path

In `bsconfig.json`:

```diff
"generators": [
  {
    "name": "atd_t",
-   "command": "npx atdgen -t $in"
+   "command": "../../node_modules/\@jchavarri/bs-atdgen-generator/atdgen.exe -t $in"
  },
  {
    "name": "atd_bs",
-   "command": "npx atdgen -bs $in"
+   "command": "../../node_modules/\@jchavarri/bs-atdgen-generator/atdgen.exe -bs $in"
  }
],
```

#### 2. Use `cmd /c`:

```diff
"generators": [
  {
    "name": "atd_t",
-   "command": "npx atdgen -t $in"
+   "command": "cmd /c npx atdgen -t $in"
  },
  {
    "name": "atd_bs",
-   "command": "npx atdgen -bs $in"
+   "command": "cmd /c npx atdgen -bs $in"
  }
],
```

Both solutions are shell independent, and work with both Powershell and Windows bash.
npm package: @jchavarri/bs-playground-bundler
Description: Create playground-embeddable files from BuckleScript-compiled libraries
Author: Javier Chávarri
Latest version: 0.0.4

# bs-playground-bundler

![](https://github.com/jchavarri/bs-playground-bundler/workflows/bsembed%20pipeline/badge.svg)

Create browser playground embeddable files from BuckleScript compilation cmi/cmj artifacts.

It includes one binary `bsembed` that can be called with `npx bsembed` or
`yarn run bsembed`.

## Install

```
yarn add -D @jchavarri/bs-playground-bundler
```

or: 

```
npm install --save-dev  @jchavarri/bs-playground-bundler
```

Now you can run `yarn run bsembed -o path/to/embeddedlibs.js` or add
`bsembed -o path/to/embeddedlibs.js` to `package.json` scripts.

## Configuring

`bsembed` works by checking the key `bsembed` in `package.json`. This key should
contain the name of the node modules that we want to embed in the playground.

E.g.:

```json
"bsembed": [
  "reason-react",
  "@glennsl/bs-json"
],
```

`bsembed` will check `node_modules` to look for these modules folders, trying to
gather all `*.cmi` and `*.cmj` files from `/lib/bs`.

`bsembed` takes a param `-o path/to/embeddedlibs.js` to indicate where the
resulting file should be added.

After that, just include this file into the playground web page. Note that the
resulting code assumes that `ocaml.load_modules` is available in the global
namespace, so it is required to load BuckleScript's playground "core" JavaScript
exported file before `bsembed` resulting file.

## Contributing

See [./CONTRIBUTING.md](CONTRIBUTING.md).
npm package: @jchavarri/ppx_42
Description: A tiny ppx for learning purposes
Author: Javier Chávarri
Latest version: 0.0.4

# hello-ppx-esy

A project that includes the minimum configuration for a [ppx](https://blog.hackages.io/reasonml-ppx-8ecd663d5640) called `ppx_42`, a project that uses Reason and [Esy](https://github.com/esy-ocaml/esy).

`ppx_42` implements a very basic ppx that transforms the `[%gimme]` extension into the number literal `42`.

So, the code:

```reason
let fourtyTwo = string_of_int([%gimme]);
```

Is transformed into:

```reason
let fourtyTwo = string_of_int(42);
```

## Files and folders

The example contains a couple of different targets that will be handled by dune (an OCaml build system)
to use the ppx in different projects:

- The library: located under `lib` folder. It is used directly by native projects, and indirectly by BuckleScript projects
- The standalone binary: BuckleScript does not provide a way to compose multiple ppxs together, so each ppx gets called individually, getting a serialized version of the AST, using the `-ppx` compiler flag behind the scenes. This can be configured in BuckleScript projects by using the `ppx-flags` key in `bsconfig.json` (see "Examples" section below).

For this reason, `ppx_42` exposes an executable that can be consumed by BuckleScript projects.

## Examples

The repo contains a couple of demo examples that show one way to consume the ppx from both BuckleScript and native environments.

Check the readmes on each example folder:

- [BuckleScript](test_bs/README.md)
- [Native](test_native/README.md)
npm package: @jchavarri/reason-react
Description: React bindings for Reason
Latest version: 0.7.0-postinstall.1

# [ReasonReact](https://reasonml.github.io/reason-react/)

Come join us in [Discord](https://discord.gg/reasonml)!

## Example

```reason
/* Greeting.re */
[@react.component]
let make = (~name) => <h1> {React.string("Hello " ++ name)} </h1>
```

in another file:

```reason
ReactDOMRe.renderToElementWithId(<Greeting name="Taylor" />, "root");
```

For a more in-depth example, see: https://github.com/reasonml-community/reason-react-hacker-news

## Quick start

[BuckleScript](http://bucklescript.github.io/) compiles ReasonML code to JavaScript. You can get it with:

```sh
npm install --global bs-platform
bsb -init my-react-app -theme react-hooks
cd my-react-app && npm install && npm start
# in another tab
npm run server
```

## Documentation

See https://reasonml.github.io/reason-react/

## Contribute

```sh
git clone https://github.com/reasonml/reason-react.git
cd reason-react
npm install
npm start
```

Then add some files somewhere (don't forget to change `bsconfig.json`, if needed).

See the README inside `src` for more info!