open-index/open-npm huggingface dataset:
npm package: @kogk/common
Description: A bunch of random useful UI-less components (for the most part)
Author: Kosmos & Koas
Latest version: 0.11.0

# @kogk/common-components

Modified from:
[**Harvey Delaney ▸**](https://blog.harveydelaney.com/creating-your-own-react-component-library/)

## Development

### Testing

```
npm run test:watch
```

### Building

```
npm run build
```

### Handy

```
npm run generate YourComponentName
```

This will generate:

```
/src
  /YourComponentName
    YourComponentName.tsx
    YourComponentName.test.tsx
    YourComponentName.types.ts
```

The default templates for each file can be modified under `util/templates`.

Don't forget to add the component to your `index.ts` exports if you want the library to export the component!

### Can I code split my components?

Yes you can.

[Read this section of my blog post](https://blog.harveydelaney.com/creating-your-own-react-component-library/#introducing-code-splitting-optional-) to find out how.

Or check out [this commit](https://github.com/HarveyD/react-component-library/commit/94631be5a871f3b39dbc3e9bd3e75a8ae5b3b759) to see what changes are neccesary to implement it.
npm package: @kogk/common-components
Description: A bunch of random useful UI-less components (for the most part)
Author: Kosmos & Koas
Latest version: 0.5.4

# @kogk/common-components

Modified from:
[**Harvey Delaney ▸**](https://blog.harveydelaney.com/creating-your-own-react-component-library/)

## Development

### Testing

```
npm run test:watch
```

### Building

```
npm run build
```

### Handy

```
npm run generate YourComponentName
```

This will generate:

```
/src
  /YourComponentName
    YourComponentName.tsx
    YourComponentName.test.tsx
    YourComponentName.types.ts
```

The default templates for each file can be modified under `util/templates`.

Don't forget to add the component to your `index.ts` exports if you want the library to export the component!

### Can I code split my components?

Yes you can.

[Read this section of my blog post](https://blog.harveydelaney.com/creating-your-own-react-component-library/#introducing-code-splitting-optional-) to find out how.

Or check out [this commit](https://github.com/HarveyD/react-component-library/commit/94631be5a871f3b39dbc3e9bd3e75a8ae5b3b759) to see what changes are neccesary to implement it.
npm package: @kogk/gatsby-plugin-i18n
Description: Gatsby plugin for i18n - mostly just providing strings globally available in your components
Latest version: 0.11.0

# @kogk/gatsby-plugin-i18n

Gatsby plugin for i18n - mostly just providing strings
globally available in your components

## Usage


```javascript
// gatsby-config.js

module.exports = {
  plugins: [
    ...etc,

    {
      resolve: '@kogk/gatsby-plugin-i18n',
      options: {
        // required
        availableLanguages: ['is', 'en'],
        // required
        translations: {
          is: require('./src/data/translations/is.json'),
          en: require('./src/data/translations/en.json')
        },
        // required
        defaultLanguage: 'is'
      }
    }
  ]
}
```
npm package: @kogk/gatsby-plugin-js-search
Description: gatsby plugin handy for using js-search on a gatsby site
Author: Kosmos & Koas
Latest version: 0.11.0

# @kogk/gatsby-plugin-js-search <!-- omit in toc -->

Gatbsy plugin impelementation of
[js-search](https://www.npmjs.com/package/js-search) for creating build-time
search indexes, lazy-loaded as needed.

## Table of Contents

- [How does it work?](#How-does-it-work)
- [Features](#Features)
- [Todo](#Todo)
- [Install](#Install)
- [How to use](#How-to-use)

## How does it work?

At build time, you query for the data you want. The data gets stored in the
public folder, but not included in any bundle (similar as images).

When you actually want to perform a search, and you call the search function
returned from useSearch, then the actual request starts and starts fetching the
appropriate index.

This means that you don't need to worry about your large search index affecting
your bundle size etc.

## Features

- Allows you to gather content from your queried nodes relatively easily
- Exposes a simple `useSearch` hook to be able to query the index

## Todo

- Further work on i18n and custom stemming etc, is probably in order

## Install

```sh
yarn add @kogk/gatsby-plugin-js-search
```

## How to use

```javascript
// In your gatsby-config.js
plugins: [
  {
    resolve: '@kogk/gatsby-plugin-js-search',
    options: {
      indexes: [
        {
          // the name is used when you need to fetch the data
          name: 'name of the index',

          // see index strategies of js-search
          indexStrategy: 'ExactWordIndexStrategy',

          // the plugin filters by nodeTypes, but if you need additional filtering
          // (eg. language, whitelisting etc) you can define a CB for that here
          filter: node => isYummy(node),

          // which types of nodes in gatsby should we include
          nodeTypes: ['SomePage'],

          // ID field is used as the primary identifier for an entry - often the url
          // will suffice
          idField: 'url',

          // Which fields to index
          fields: ['title', 'tags', 'text'],

          // A function that takes the Node object and converts it to any type you like
          mapper: node => ({
            url: node.url,
            title: node.data.page_title.text,
            tags: node.tags,
            text: extractTextFromRawSlices(node.dataRaw.body)
          })
        }
      ]
    }
  }
]
```
npm package: @kogk/gatsby-plugin-ui-lib
Description: gatsby plugin to browse UI components exposed same-named .mdx files
Author: Kosmos & Koas
Latest version: 0.11.0

# @kogk/gatsby-plugin-ui-lib <!-- omit in toc -->

Kind of like storybook but better

## Table of Contents

- [How does it work?](#How-does-it-work)
- [Features](#Features)
- [Install](#Install)
- [How to use](#How-to-use)
- [TODO](#TODO)

## How does it work?

You supply your components with an mdx file, where it has the same name as the
component filename. If one exists, it gets added to an automatically generated
storybook-like thing.

## Features

- Allows you to work on and develop your UI components faster
- Acts as a component inventory

## Install

```sh
yarn add @kogk/gatsby-plugin-ui-lib
```

## How to use

These are the plugin's options along with their default values

```javascript
// In your gatsby-config.js
plugins: [
  {
    resolve: '@kogk/gatsby-plugin-ui-lib',
    options: {
      // Required - tells the plugin what path to search for components in
      searchPath: require.resolve('./src/components'),
      // where the URL of the items should be at
      baseUrl: '/ui-docs/',
      baseComponent: require.resolve('./src/components/Directory/Directory.js'),
      layoutComponent: require.resolve(
        './src/components/DefaultLayout/DefaultLayout.js'
      )
    }
  }
]
```

## TODO

- [ ] Knobs-like thing for supplying props in realtime
- [ ] Groupping/foldering for components
- [ ] Some documented interface for creating documentation links without it
      being associated with a component
npm package: @kogk/gatsby-starter
Description: gatsby-starter-kogk
Latest version: 0.9.9

# @kogk/gatsby-starter

Starter for gatsby with prismic and i18n, bootstrap etc

## Usage
```shell
yarn start
```

## Hygen
```
yarn cmp
```

## Things of note

- all prismic schemas in `src/data/prismic-schemas` will be included in the
  prismic schema config, mapped to the file name. So the file name needs to
  match what is defined in the prismic content type name ("api name")

## Remember to change

Please mark these as [x] when they are done

- [ ] favicon in src/static/favicon.ico
- [ ] gatsby-config.js
  - [ ] theme color, background color in manifest for offline/pwa
  - [ ] siteUrl so sitemap.xml works as expected
npm package: @kogk/gatsby-theme-base
Description: Base K&K theme, for implementing gatsby sites
Latest version: 0.11.1

# @kogk/gatsby-theme-base

Base K&K theme, for implementing gatsby sites

Usage

```javascript
// gatsby-config.js

module.exports = {
  siteMetadata: {
    // same applies as to gatsby-plugin-advanced-sitemap -- you need to set this for it to work:
    siteUrl: 'http://www.example.com'
  },
  plugins: [
    ...etc,

    {
      resolve: '@kogk/gatsby-theme-base',
      options: {
        // see options below
      }
    }
  ]
}
```

| Option name/key | Default   | Description                                                               |
| --------------- | --------- | ------------------------------------------------------------------------- |
| i18n            | undefined | Options for i18n -- see @kogk/gatsby-plugin-i18n                          |
| extraAliases    | undefined | if you want to add extra import aliases (eg. '@images/path/to/image.jpg') |
npm package: @kogk/gatsby-theme-prismic
Description: This is basically a "sensible defaults" for prismic.
Latest version: 0.11.0

# @kogk/gatsby-theme-prismic

This is basically a "sensible defaults" for prismic.

It includes:
- a thing to map slices to components
- more out-of-the-box previewing experience
- opinionated about how you define a page


# example usage

in `gatsby-config.js`

```js
module.exports = {
  plugins: [
    {
      resolve: '@kogk/gatsby-theme-prismic',
      options: {
        repositoryName: 'name-of-prismic-repo',
        accessToken: 'access token',
        schemaDir: path.resolve(`./src/data/prismic-schemas/`),
        linkResolver: () => linkResolver,
        previewTypes: ['PrismicPage'],
        pageSources: [
          {
            queryName: 'allPrismicPage',
            template: path.resolve('./src/components/templates/Page/Page.js'),
            pageContext (node) {
              // optionally supply additional page context variables, if needed
              return {
                myContextVar: 'lala'
              }
            }
          }
        ]
      }
    }
  ]
}
```