Gatsby-theme-github-stats
A Gatsby Theme to display statistics for GitHub repos.
Example Site
you can see a live running example site at https://gatsby-theme-github-stats-example.netlify.com/.
This is the gatsby site in this repo at site
deployed up to Netlify.
Features
- Charts with Recharts library
Setup
Add the package to your gatsby site
yarn add gatsby-theme-github-stats
and then put it in your gatsby-config file
module.exports = {
siteMetadata: {
title: '<title for page>'
source: '<GitHub URL for your site>'
repoNameWithOwner: '<github owner & repo in format of `owner/repo`>'
}
plugins: [
{
resolve: `gatsby-theme-github-stats`,
options: {
dataPath: path.join(__dirname, `src`, `data`),
},
},
],
}
Next, create a file at src/data/data.json
in your gatsby site and have it as the following format:
[
{
"stars": 35670,
"openPRs": 84,
"timestamp": 1560977138,
"closedIssues": 6355,
"closedPRs": 1094,
"openIssues": 442,
"mergedPRs": 6947
}
]
Each item is a single datapoint. There is no max amount of datapoints you can have.
Then finally run yarn develop
and you should see the fully fleshed out site with graphs and all.
Config Options
These are all of the currently available fields in the options
field in the gatsby-config plugin entry for this theme:
Name | Description | Default | Required |
---|---|---|---|
basePath | url base path for the dashboard page to be created at (ex: '/stats/' ) |
’/’ | false |
dataPath | the filepath to your data directory | N/A | true |
Site Metadata
Some of the text around the site is customized by siteMetadata tokens.
Name | Description | Example | required |
---|---|---|---|
title | Title at the top left of the page and the <title> tag |
Gatsby Stats | true |
source | url to source of the Gatsby site | https://github.com/lannonbr/gatsby-github-stats | false |
repoNameWithOwner | username & repo name on GitHub | gatsbyjs/gatsby | false |