ObservableHQ 또는 웹사이트에 귀하의 오픈 소스 기여를 표시하십시오.

안녕. 오늘은 동적 오픈소스 기여 표시 테이블을 가져오겠습니다.

먼저 보자.


live demo

개요

Github API는 PullRequest 정보 등을 제공할 수 있습니다. ObserveableHQ 웹사이트에서 API를 호출하고 정보를 테이블 보기로 표시합니다.

ObserveableHQ는 데이터로 생각하는 온라인 책입니다. js 코드와 분석 데이터를 실행할 수 있습니다.

단계

Github 구성

먼저 ObserveableHQ에서 github3 API 라이브러리를 사용합니다.

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

ghKey는 github.com에서 정보를 요청할 수 있는 권한을 제공합니다. 그리고 우리는 그것을 비밀로 저장합니다: ObserveableHQ의 개념, 그래서 그 비밀은 모든 사람에게 노출되지 않습니다.

github.com에서 토큰을 생성합니다.


그런 다음 입력 상자를 채우고 set secret 를 클릭합니다.


이제 이 라이브러리로 GitHub API를 요청할 수 있습니다!🎉

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

PR 변수 값에는 abserari 사용자의 PR 정보가 포함됩니다.

데이터 작업

정보를 채우기 위해 수동으로 입력할 필요가 없도록 먼저 테이블을 가져옵니다.

import { table } from "@gampleman/table"

테이블을 사용하여 PR 항목을 테이블에 매핑

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}`
    }
  ]
})

ObserveableHQ에서 동적 테이블을 얻을 것입니다!

js 파일을 다운로드하여 앱에 임베드할 수 있습니다.

내 노트북을 포크하고 GitHub 토큰으로 구성할 수도 있습니다.