https://github.com/smakosh/gatsby-source-dribbble

Load your Dribbble shots into your Gatsby website
https://github.com/smakosh/gatsby-source-dribbble

dribbble gatsby plugin source

Last synced: 12 days ago
JSON representation

Load your Dribbble shots into your Gatsby website

• Host: GitHub
• URL: https://github.com/smakosh/gatsby-source-dribbble
• Owner: smakosh
• License: mit
• Created: 2018-02-16T16:37:10.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-03-02T13:28:08.000Z (over 2 years ago)
• Last Synced: 2024-10-17T16:05:46.852Z (22 days ago)
• Topics: dribbble, gatsby, plugin, source
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/gatsby-source-dribbble
• Size: 585 KB
• Stars: 11
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gatsby-source-dribbble

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

> Gatsby.js source plugin for loading data from Dribbble

[![Support me on Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/smakosh)

[![Package Version](https://img.shields.io/npm/v/gatsby-source-dribbble.svg?style=flat-square)](https://www.npmjs.com/package/gatsby-source-dribbble)

[![Package Downloads](https://img.shields.io/npm/dt/gatsby-source-dribbble.svg?style=flat-square)](https://www.npmjs.com/package/gatsby-source-dribbble)

Learn more about [Gatsby](https://www.gatsbyjs.org/) and its plugins here: [https://www.gatsbyjs.org/docs/plugins/](https://www.gatsbyjs.org/docs/plugins/)

**See it in live action on the [example site](https://dribbble-example.netlify.com)!**

[Source Code](https://github.com/smakosh/gatsby-source-dribbble-example) for the example site.

## Install

```bash

npm install gatsby-source-dribbble

```

## How to use

```Javascript

// In your gatsby-config.js

plugins: [

  {

    resolve: `gatsby-source-dribbble`,

    options: {

      // You can get your Access Token by following this tutorial: http://developer.dribbble.com/v2/oauth/

      access_token: '<< Your_Access_Token_here >>'

    }

  }

]

```

## GraphQL Queries

Get all your details

```graphql

{

  dribbbleUser {

    name

    username

    bio

    avatar

    location

    url

    links

    created_at

    can_upload

    pro

    teams

  }

}

```

Get all your shots

```graphql

{

  allDribbbleShot {

    nodes {

      id

      title

      description

      published

      updated

      url

      tags

      cover

      width

      height

      localCover {

        childImageSharp {

          fixed(width: 600) {

            ...GatsbyImageSharpFixed

          }

        }

      }

    }

  }

}

```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Mitchell Butler
💻

    
Reagan
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!