npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bcgov/gatsby-source-github-raw

v1.0.10

Published

Leverages the Github Contents API to convert files into transformable Gatsby Nodes

Downloads

27

Readme

Gatsby Source Github Raw

Build Status

NOTE! Gatsby has introduced an api for Creating Remote File Nodes which is a more generic utility compared to this plugin. Please consider utilizing the native utilities before using this package!

A simplified way of leveraging the Github Contents Api as Gatsby graphql nodes.

Features

  • Implied Mime Types mime/media types are set based on file extensions when available
  • Bind Properties you can bind properties that are 'attached' to the raw file node if needed

To Use

  • Install npm install --save @bcgov/gatsby-source-github-raw
  • Add to your gatsby config
{
  resolve: '@bcgov/gatsby-source-github-raw',
  options: {
    githubAccessToken: '...',
    files: [
      'https://github.com/foo/bar/blob/master/something.md'
    ]
  }
}

Options

  • githubAccessToken: this is the oauth access token, it will require read priviledges on a repo
  • files: this is either a list of files [String], a list of objects, or a name of a resolved transformer json node type, or a function

Files Option

There are a few ways to pass in files

  1. as a simple array of strings ['https://github.com/foo/bar/blob/master/something.md', 'https://github.com/foo/bar/blob/master/something2.md']
  2. as an array of objects, this allows you to bind extra properties to each node

if you are binding properties, you need to ensure that the properties that you bind between files match the same schema since this process depends on gatsby's graphql type inferrence routine

[
  {
    url: 'https://github.com/foo/bar/blob/master/something.md'
    labels: [ // labels will become a bound property that is available at node._xxboundProperties.labels
      'cool',
      'featured',
    ]
  },
  {
    url: 'https://github.com/foo/bar/blob/master/something2.md',
    labels: [ // labels will become a bound property that is available at node._xxboundProperties.labels
      'featured',
    ]
  }
]
  1. If there are many files you'd like to source, containing them all in the gatsby-config.js file is cumbersome. You may store your 'files config' into a json file and have gatsby-transformer-json pick it up. The implied nodeType that is created from the directory can be passed in as the files option

foo.json

  [
    {
    "url": "https://github.com/foo/bar/blob/master/something.md",
    "labels": [
      "cool",
      "featured"
    ]
  },
  {
    "url": "https://github.com/foo/bar/blob/master/something2.md",
    "labels": [
      "featured"
    ]
  }
  ]

gatbsy-config

{
  resolve: '@bcgov/gatsby-source-github-raw',
  options: {
    githubAccessToken: '...',
    files: 'fooJson'
  }
}
  1. Files as a function
/**
 * fileCallback
 * @param {Function} getNodes gatsby getNodes function in case you need it
 * @returns {Array<String> | Array<Object>} a list of files in strings or objects
 **/
const fileCallback = getNodes => {
  // get nodes allows you to produce a set of urls based on your own conditions, for example if you
  // had multiple json files that held url information that you wanted to normalize and use
  return ['...list of files']
}
{
  resolve: '@bcgov/gatsby-source-github-raw',
  options: {
    githubAccessToken: '...',
    files: () => ['https://github.com/foo/bar/blob/master/blah.md']
  }
}

Exceptions to applying bound properties

Because manifests can be passed in as plain js objects as well as loaded through the use of @bcgov/gatsby-transformer-json, to maintain consistency between these two possible sources, the following properties are not usable within json files that are leveraged as a source for files.

  • internal
  • id
  • parent
  • children

This is because these properties are default properties applied to any graphql node within gatsby.

Accessing Bound Properties

Bound Properties are accessed at node._xxboundProperties