DEV Community

abser
abser

Posted on

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.
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'
Enter fullscreen mode Exit fullscreen mode

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`
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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}`
    }
  ]
})
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)