DEV Community

loading...

Show Our Opensource Contributions on ObserveableHQ or any Website.

abserari profile image AbserAri ใƒป2 min read

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

Let's see first.
Alt Text

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.
Alt Text

then fill the input box and click set secret.
Alt Text

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.

Discussion (0)

pic
Editor guide