open-index/open-npm huggingface dataset:
npm package: @kriya/gridsome-remark-prismjs
Description: Syntax highlighter for markdown code blocks
Latest version: 0.5.0

# @gridsome/remark-prismjs

> Syntax highlighter for markdown code blocks

## Install

- `npm install @gridsome/remark-prismjs`
- `yarn add @gridsome/remark-prismjs`
- `pnpm install @gridsome/remark-prismjs`

## Usage

In your `main.js` file, import a Prism CSS theme:

```js
import 'prismjs/themes/prism.css'

export default function (Vue) {
  // ...
}
```

In `gridsome.config.js`, add syntax highlighter to a single markdown source:

```js
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        route: '/blog/:year/:month/:day/:slug',
        remark: {
          plugins: [
            '@gridsome/remark-prismjs'
          ]
        }
      }
    }
  ]
}
```

Or add syntax highlighter to all markdown sources:

```js
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {}
    }
  ],

  transformers: {
    remark: {
      plugins: [
        '@gridsome/remark-prismjs'
      ]
    }
  }
}
```

### Options

#### customClassPrefix

- Type: `String`
- Default: `''`

If Prism's default classes are too generic and cause conflicts, you can add a prefix like `"prism--"` to all Prism
classes by passing it in as the `customClassPrefix`.

#### transformInlineCode

- Type: `Boolean`
- Default: `false`

If you'd like to disable highlighting of inline code blocks, pass `transformInlineCode: false` in the plugin options

#### showLineNumbers

- Type: `Boolean`
- Default: `false`

If you'd like to add line numbers alongside the code. You can pass `showLineNumbers: true` in the plugin options and import a Prism CSS about line numbers to `main.js` file. like this:

```js
import 'prismjs/themes/prism.css'
// Prism default CSS about line numbers
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

export default function (Vue) {
  // ...
}
```

If you wish to only show line numbers on certain code blocks, you can leave `false` and use the `{ lineNumbers: true }` syntax below
npm package: @kriya/gridsome-source-airtable
Description: Airtable source for Gridsome
Latest version: 0.2.1

# @gridsome/source-airtable

> Airtable source for Gridsome.

## Install

- `npm install @gridsome/source-airtable`
- `yarn add @gridsome/source-airtable`
- `pnpm install @gridsome/source-airtable`

## Usage

```js
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-airtable',
      options: {
        apiKey: 'YOUR_API_KEY', // required
        base: 'YOUR_BASE_ID', // required
        tables: [
            {
                name: 'YOUR_TABLE_NAME', // required
                typeName: 'YOUR_TYPE_NAME', // required
                select: {}, // optional,
                links: [ // optional
                    {
                        fieldName: 'Case Sensitive Field Name',
                        typeName: 'TYPE_NAME_FROM_LINKED_TABLE',
                        linkToFirst: false // optional
                    }
                ]
            },
            {
                name: 'YOUR_LINKED_TABLE_NAME', // required
                typeName: 'YOUR_LINKED_TYPE_NAME', // required
            }
        ],
        tableName: 'YOUR_TABLE_NAME', // required
      },
    },
  ],
  templates: {
    YOUR_TYPE_NAME: 'YOUR_OPTIONAL_ROUTE', // optional
  },
}
```

### Options

1. `apiKey`: This can be found when logged in to airtable.com, under "ACCOUNT > API"
2. `base`: This can be found by going to <https://airtable.com/api>, clicking on your workspace, and will be visible in the url: <https://airtable.com/{YOUR_BASE_ID}/api/docs#curl/introduction>
3. `tables`: This is where you configure one or more tables that should be loaded as a data source
    1. `name`:  This is the full name of your chosen workspace table, for example "Furniture" is the first and main table in the pre-defined workspace named "Product Catalog & Orders"
    2. `typeName`: Your chosen type name. The type name "Product" is an example of an fitting route for the pre-defined airtable workspace named "Product Catalog & Orders"
    3. `select`: Your select options. These can be found by going to <https://airtable.com/api>, clicking on your workspace, and will be visible under the _List records_ of your table
    4. `links`: When links to another record are set in airtable, they need to be also mapped so we can return them as a sub-object
        1. `fieldName`: This is the case sensitive full name of the field that has been set as a "Link to another record type"
        2. `typeName`: This is the type name of the linked table that has been added to the "tables" config
        3. `linkToFirst`: Airtable always returns linked records as an array of records, but there is sometimes a case when you have only one record linked. This is the convenient option that will extract the first record from array and return an object. It emulates the "one to one" relation from RDBMS
npm package: @kriya/gridsome-source-datocms
Description: DatoCMS source for Gridsome
Latest version: 0.3.0

# @gridsome/source-datocms

> DatoCMS source for Gridsome. This package is under development and
API might change before v1 is released.

## Install

- `npm install @gridsome/source-datocms`
- `yarn add @gridsome/source-datocms`
- `pnpm install @gridsome/source-datocms`

## Usage

```js
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-datocms',
      options: {
        apiToken: 'YOUR_READONLY_API_TOKEN', // required
        previewMode: false,
        apiUrl: 'https://site-api.datocms.com',
        typeName: 'DatoCms'
      }
    }
  ]
}
```
npm package: @kriya/gridsome-source-faker
Description: Source with fake data for Gridsome
Latest version: 0.3.0

# @gridsome/source-faker

> [Faker.js](https://github.com/marak/Faker.js/) source for Gridsome

## Install

- `npm install @gridsome/source-faker`
- `yarn add @gridsome/source-faker`
- `pnpm install @gridsome/source-faker`

## Usage

```js
export default {
  plugins: [
    {
      use: '@gridsome/source-faker',
      options: {
        numNodes: 100
      }
    }
  ]
}
```
npm package: @kriya/gridsome-source-ghost
Description: ghost source for Gridsome
Latest version: 0.4.0

# @gridsome/source-ghost

> Ghost source for Gridsome. This package is under development and API might change before v1 is released.

## Install

- `npm install @gridsome/source-ghost`
- `yarn add @gridsome/source-ghost`
- `pnpm install @gridsome/source-ghost`

## Usage

```js
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-ghost',
      options: {
        typeName: 'Ghost',
        baseUrl: 'http://localhost:2368',
        contentKey: '0b7050113fba7147f358cc2f4d',
        version: 'v3' // default
      }
    }
  ],
  templates: {
    GhostPost: '/:year/:month/:day/:slug',
    GhostTag: '/tag/:slug'
  }
}
```
npm package: @kriya/gridsome-source-graphql
Description: GraphQL source for Gridsome
Latest version: 0.1.1

# @gridsome/source-graphql

> Pull a remote GraphQL schema in locally

## Install

- `npm install @gridsome/source-graphql`
- `yarn add @gridsome/source-graphql`
- `pnpm install @gridsome/source-graphql`

## Usage

```js
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-graphql',
      options: {
        url: 'https://example.com/api',
        fieldName: 'puppies',
        typeName: 'puppyTypes',

        headers: {
          Authorization: `Bearer ${process.env.AUTH_TOKEN}`,
        },
      },
    },
  ],
}
```

### Options

#### url

- Type: `string` _required_

The URL of a GraphQL API endpoint to request your schema from.

#### fieldName

- Type: `string` _required_

The name that should be used to namespace your remote schema when it's merged in, so that it doesn't conflict with any local data.

For instance, if you put "puppies" your remote schema's data will be available by querying like so:

```graphql
query {
  puppies {
    helloWorld
  }
}
```

#### typeName

- Type: `string`
- Defaults: `fieldName`

The prefix to be used for your imported schema's field types.

#### headers

- Type: `object`

An object of headers to be passed along with your request to the API endpoint. This will generally be used to authenticate your request.

**Note**: For safety, you should pass any sensitive tokens/passwords as environmental variables. To learn more, see the [Gridsome Docs on Environmental Variables](https://gridsome.org/docs/environment-variables/).
npm package: @kriya/gridsome-source-strapi
Description: Strapi source for Gridsome
Latest version: 0.2.0

# @gridsome/source-strapi

> [Strapi](https://strapi.io/) source for Gridsome

## Install

- `npm install @gridsome/source-strapi`
- `yarn add @gridsome/source-strapi`
- `pnpm install @gridsome/source-strapi`

## Usage

```js
export default {
  plugins: [
    {
      use: '@gridsome/source-strapi',
      options: {
        apiURL: 'http://localhost:1337',
        queryLimit: 1000, // Defaults to 100
        contentTypes: ['article', 'user'],
        singleTypes: ['impressum'],
        // Possibility to login with a Strapi user,
        // when content types are not publicly available (optional).
        loginData: {
          identifier: '',
          password: ''
        }
      }
    }
  ]
}
```
npm package: @kriya/gridsome-source-wordpress
Description: WordPress source for Gridsome
Latest version: 0.6.0

# @gridsome/source-wordpress

> WordPress source for Gridsome. This package is under development and
API might change before v1 is released.

## Install

- `npm install @gridsome/source-wordpress`
- `yarn add @gridsome/source-wordpress`
- `pnpm install @gridsome/source-wordpress`

## Usage

```js
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-wordpress',
      options: {
        baseUrl: 'WEBSITE_URL', // required
        apiBase: 'wp-json',
        typeName: 'WordPress',
        perPage: 100,
        concurrent: 10
      }
    }
  ],
  templates: {
    WordPressPost: '/:year/:month/:day/:slug'
  }
}
```

## Use with Advanced Custom Fields

Install the [ACF to REST API](https://github.com/airesvsg/acf-to-rest-api) plugin to make ACF fields available in the GraphQL schema.

### Tips

**Exclude unnecessary data from ACF fields**

Gridsome needs the `Return format` set to `Post Object` for `Post Object` relations in order to resolve references automatically. But Gridsome only need the `post_type` and `id` to set up a working GraphQL reference. Use the filter below to exclude all other fields.

```php
add_filter( 'acf/format_value', function ( $value ) {
  if ( $value instanceof WP_Post ) {
    return [
      'post_type' => $value->post_type,
      'id'        => $value->ID,
    ];
  }

  return $value;
}, 100 );
```

## Use Custom REST Endpoints

To use REST endpoints from plugins or defined in your theme add a `customEndpoints` array to source-wordpress options.

```js
  use: '@gridsome/source-wordpress',
  options: {
    ... // other source-wordpress options
    customEndpoints: [
      {
        typeName: "WPMenu",
        route: 'myApi/v1/menus',
      }
    ]
  }
```

If you are trying to query posts, you will need to add the `normalize: true` option to make sure the data is properly added:

```js
    customEndpoints: [
        {
            typeName: "Posts",
            route: "/wp/v2/posts",
            normalize: true,
        },
    ]
```

## Create Collections based on REST Endpoints

`customEndpoints` allow you to neatly create separate [Collections](https://gridsome.org/docs/collections/#collections) by querying different REST endpoints.

```js
    customEndpoints: [
        {
            typeName: "Collection1",
            route: "/wp/v2/posts?categories=<category_id>",
            normalize: true,
        },
        {
            typeName: "Collection2",
            route: "/wp/v2/posts?tags=<tag_id>",
            normalize: true,
        },
    ]
```