Show Our Opensource Contributions on ObserveableHQ or any Website.

Hello there. Today I'll bring you the dynamic opensource contributions display table.

Let's see first.

live demo

Overview

Github API could provide us the PullRequest info or others. Call the API on the ObserveableHQ Website and show the info as a table view.

ObserveableHQ is an online book to think with data. You could run js code on it and analytic data.

Step

Configure Github

we first use the github3 API library on ObserveableHQ

import { viewof ghKey,github3 } from '@yhyddr/github-api-in-observable-v3-and-v4'

ghKey give us the power to request info from github.com. and we store it as a secret: the concept of ObserveableHQ, so the secret would not expose to everyone.

generate the token at your github.com.

then fill the input box and click set secret.

Now you could request GitHub API with this library!🎉

PR = github3`search/issues?q=author:abserari+type:pr`

PR variable value would contain the PR info of the user: abserari.

Work with data.

First import the table so we don't need to type manually to fill the info.

import { table } from "@gampleman/table"

use table to map the PR entries to a table

table(DisplayPR, {
  nully: () => '<span style="color: red">No data</span>',
  limit: 500,
  enableFilter: false,
  enableCSVDownload: true,
  columns: [
    {
      key: 'repo',
      name: 'Repo',
      render: val => `${val}`
      // `<a href="https://google.com/?q=${val}" target="_blank">${val}</a>`
    },
    {
      key: 'statusHTML',
      name: 'Status',
      render: val => `${val}`
    },

    {
      key: 'checksHTML',
      name: 'Checks',
      render: val => `${val}`
    },
    // 'body'
    {
      key: 'content',
      name: 'Content',
      render: val => `${val}`
    }
  ]
})

we would get the dynamic table on ObserveableHQ!

Could download the js file and embed it to yourselves app.

You also could fork my notebook and configure it with your GitHub token.