DEV Community

abser
abser

Posted on

3

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.

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay