open-index/open-npm huggingface dataset:
npm package: @ghranek/gatsby-source-blogger
Description: Gatsby source plugin for building websites using Blogger as a data source
Author: Marco Valsecchi
Latest version: 1.1.3

# gatsby-source-blogger

Source plugin for pulling blog posts and pages into [Gatsby](https://www.gatsbyjs.org/) from [Blogger](https://www.blogger.com/).

## Install

`npm install --save gatsby-source-blogger`

## Usage

```JavaScript
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-blogger',
      options: {
        apiKey: 'your-api-key',
        blogId: 'your-blog-id'
        }
      }
    }
  ]
}
```

### Query Blog Posts

The plugin maps all JSON fields documented in the [Blogger API Reference](https://developers.google.com/blogger/docs/3.0/using#WorkingWithPosts) to GraphQL fields.

```GraphQL
{
  allBloggerPost {
    edges {
      node {
        slug
        kind
        id
        blog{
          id
        }
        published
        updated
        url
        selfLink
        title
        content
        author{
          id
          displayName
          url
          image{
            url
          }
        }
        replies{
          totalItems
          selfLink
        }
      }
    }
  }
}
```

### Query Pages

```GraphQL
{
  allBloggerPage {
    edges {
      node {
        slug
        kind
        id
        blog{
          id
        }
        published
        updated
        url
        selfLink
        title
        content
        author{
          id
          displayName
          url
          image{
            url
          }
        }
      }
    }
  }
}
```

### Slug

The plugin adds additional slug field to both the GraphQL type from the current Blogger url taking the last segment without the .html extension:

```
https://my-domain.com/2019/02/this-is-my-post-slug.html
```

```
https://my-domain.com/p/this-is-my-page-slug.html
```

### Markdown

Your Blogger posts and pages are available in Markdown format too; thanks to [Gatsby Transformer Remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/) you can query `MarkdownRemark` child type and benefit to its additional fields like excerpt, time to read, etc.

```GraphQL
{
  allBloggerPost {
    edges {
      node {
        slug
        ...
        childMarkdownRemark{
          frontmatter{
            title
            date
            slug
          }
          html
          excerpt
          timeToRead
        }
      }
    }
  }
}
```
npm package: @ghranek/hooks
Description: Custom React Hooks
Author: Muhammad Abul-Gharaniq
Latest version: 0.1.0

# React Custom Hooks

`yarn add @ghranek/hooks`

## Lifecycle Hooks

### `useDidMount(function)`

Similar to `componentDidMount` in class component.

### `useWillUnmount(function)`

Similar to `componentWillUnmount` in class component.

### `useDidUpdate(function, [dependencies])`

Similar to `componentDidUpdate` in class component.

## Client Hooks

### `const isScreen = useMediaQuery("(max-width: 768px)")`
npm package: @ghranek/moment-islamic-civil
Description: A Hijri calendar (Based on islamic civil calculation) plugin for moment.js.
Author: Samar Sultan
Latest version: 1.0.1

# moment-islamic-civil

A Hijri calendar (Based on civil calculations) plugin for moment.js

# Where to use
`moment-islamic-civil` works in Node.js.

### Node.js

```js
var moment = require('moment-civil');
moment().format('iYYYY/iM/iD');
```


### Require.js

```js
require.config({
  paths: {
    "moment": "path/to/moment",
    "moment-civil": "path/to/moment-civil"
  }
});
define(["moment-civil"], function (moment) {
  moment().format('iYYYY/iM/iD');
});
```

API
---

This plugin tries to mimic `momentjs` api. Basically, when you want to format or parse a string, just add a `i` to the format token like 'iYYYY' or 'iM'. Also you can use the Long date formats for "En" and "Ar" locales.
For example:

```js
m = moment('1410/8/28', 'iYYYY/iM/iD'); // Parse a Hijri date.
m.format('iYYYY/iM/iD [is] YYYY/M/D'); // 1410/8/28 is 1990/3/25

m.iYear(); // 1410
m.iMonth(); // 7
m.iDate(); // 28
m.iDayOfYear(); // 236
m.iWeek(); // 35
m.iWeekYear(); // 1410

m.add(1, 'iYear');
m.add(2, 'iMonth');
m.format('iYYYY/iM/iD'); // 1411/10/28

m.iMonth(11);
m.startOf('iMonth');
m.format('iYYYY/iM/iD'); // 1411/12/1

m.iYear(1392);
m.startOf('iYear');
m.format('iYYYY/iM/iD'); // 1420/1/1

m = moment('2017-03-29 12:00', 'YYYY-MM-DD HH:mm');
    m.format('LT'); // 12:00
    m.format('L'); // 1438/07/01
    m.format('l'); // 1438/7/1
    m.format('LL'); // 1 Rajab 1438
    m.format('ll'); // 1 Raj 1438
    m.format('LLL'); // 1 Rajab 1438 12:00
    m.format('lll'); // 1 Raj 1438 12:00
    m.format('LLLL'); // Wednesday, 1 Rajab 1438 12:00
    m.format('llll'); // Wed, 1 Raj 1438 12:00

moment('1436/2/6 16:40', 'iYYYY/iM/iD HH:mm').format('YYYY-M-D HH:mm:ss'); // 2014-11-28 16:40:00

moment('2015-04-03 07:10:20').endOf('iMonth').format('iYYYY-iMM-iDD HH:mm:ss'); // 1436-06-29 23:59:59

m = moment('1990 Sha 25', 'YYYY iMMM D')
    m.format('YYYY-MM-DD'); // 1990-03-25
    
 m = moment('1990 Sha’ban 25', 'YYYY iMMMM D')
     m.format('YYYY-MM-DD'); // 1990-03-25
 
 m = moment('26 1436 8', 'iD iYYYY M')
     m.format('YYYY-MM-DD'); // 2014-08-19
```

To use the Arabic locale you need to do either:
- to import the arabic locale directly from : "moment-islamic-civil/locale/ar.js".
- or to use this function: moment().loadLocale('ar');

Acknowledgements
-------
This project was built from the great work done by [@behrang](https://github.com/behrang) whose behind [moment-jalaali](https://github.com/jalaali/moment-jalaali) project and [@xsoh](https://github.com/xsoh ) whose behind [moment-hijri](https://github.com/xsoh/moment-hijri) project.
npm package: @ghranek/react-verification-code-input
Description: 🎉A verification code input
Author: suweya
Latest version: 1.3.1

# react-verification-code-input

> 🎉A verification code input

[![NPM](https://img.shields.io/npm/v/react-verification-code-input.svg)](https://www.npmjs.com/package/react-verification-code-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![NPM](https://nodei.co/npm/react-verification-code-input.png)](https://nodei.co/npm/react-verification-code-input/)

## Live demo

- [Demo](https://suweya.github.io/react-verification-code-input/)

## Install

```bash
npm install --save react-verification-code-input
```

## Usage

```jsx
import React, { Component } from 'react';

import ReactCodeInput from 'react-verification-code-input';

class Example extends Component {
  render() {
    return <ReactCodeInput />;
  }
}
```

## PropTypes

|     Key     |  Type  |              Desc               |
| :---------: | :----: | :-----------------------------: |
|    type     |  text  |      one of number or text      |
|   fields    | number |     The count of characters     |
|  onChange   |  func  |   Trigger on character change   |
| onComplete  |  func  | Trigger on all character inputs |
| fieldWidth  | number |           input width           |
| fieldHeight | number |          input height           |
|  autoFocus  |  bool  | auto focus first input on init  |
|    title    | string |        code input title         |
|   loading   |  bool  |        show loading flag        |
|  className  | string |           class name            |
|   values    | array  |         default values          |
| placeholder | array  |        input placeholder        |

## License

MIT © [suweya](https://github.com/suweya)
npm package: @ghslp/eslint-config
Description: ESLint config for personal projects
Author: Grant Heaslip
Latest version: 0.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @ghslp/eslint-config

Shared ESLint config for personal projects.

- [How to use](#how-to-use)
    - [Install](#install)
    - [Add to ESLint config](#add-to-eslint-config)

## How to use

### Install

```sh
npm install @ghslp/eslint-config --save-dev
```

### Add to ESLint config

Create a `.eslintrc.js` containing (at least) the following:

```js
// Workaround for https://github.com/eslint/eslint/issues/3458
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  extends: [
    // Include for all projects:
    "@ghslp/eslint-config",
    // Include for React projects:
    "@ghslp/eslint-config/react"
    // Include for React + Next.js projects:
    "@ghslp/eslint-config/react"
  ],
};
```
npm package: @ghslp/stylelint-config
Description: Shared Stylelint config for personal projects
Author: Grant Heaslip
Latest version: 0.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @ghslp/stylelint-config

Shared [Stylelint](https://stylelint.io/) config for personal projects.

## How to use

### Install

```sh
npm install @ghslp/stylelint-config --dev
npx install-peerdeps @ghslp/stylelint-config --dev
```

### Add to Stylelint config

Create a `stylelint.config.js` containing (at least) the following:

```js
const stylelintConfig = {
  extends: ["@ghslp/stylelint-config"],
};

module.exports = stylelintConfig;
```